Vue.js 组件访问之父访问子

2021/4/16 组件通信Vue

# $children

通过$children访问子组件的属性或者方法


	<div id="app">
		<cpn1></cpn1>
		<button type="button" @click="btnClick">查看</button>
	</div>


<template id="myCpn">
	<div>
		<h2>这是子组件</h2>
	</div>
</template>

<script src="vue.js"></script>
<script type="text/javascript">
	const cpn1 = Vue.extend({
					template:'#myCpn',
					methods:{
							showOk(){
								console.log('OK')
							}
						}

				})
				

	const app = new Vue({
					el: '#app',
					data: {
						name:'Retr0'
					},
					components:{
						cpn1
					},
					methods:{
						btnClick(){
              console.log(this.$children)
							this.$children[0].showOk()  //索引为0的子组件的方法 在父级方法中使用 
						}
					}
				})
	      
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# $refs

  • 预期string

    ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:

    <!-- `vm.$refs.p` will be the DOM node -->
    <p ref="p">hello</p>
    
    <!-- `vm.$refs.child` will be the child component instance -->
    <child-component ref="child"></child-component>
    
    1
    2
    3
    4
    5

    v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

    关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

  • 参考子组件引用 (opens new window)

# 访问子组件实例或子元素 (opens new window)

尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如:

<base-input ref="usernameInput"></base-input>
1

现在在你已经定义了这个 ref 的组件里,你可以使用:

this.$refs.usernameInput
1

来访问这个 实例,以便不时之需。比如程序化地从一个父级组件聚焦这个输入框。在刚才那个例子中,该 组件也可以使用一个类似的 ref 提供对内部这个指定元素的访问,例如:

<input ref="input">
1

甚至可以通过其父级组件定义方法:

methods: {
  // 用来从父级组件聚焦输入框
  focus: function () {
    this.$refs.input.focus()
  }
}
1
2
3
4
5
6

这样就允许父级组件通过下面的代码聚焦 `` 里的输入框:

this.$refs.usernameInput.focus()
1

refv-for 一起使用的时候,你得到的引用将会是一个包含了对应数据源的这些子组件的数组。

$refs 只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs



	<div id="app">
		<cpn1 :cp-name ="name" ref = 'a'></cpn1>
		<button type="button" @click="btnClick">查看</button>
	</div>


<template id="myCpn">
	<div>
		<h2>{{cpName}}</h2>
	</div>
</template>

<script src="vue.js"></script>
<script type="text/javascript">
	const cpn1 = Vue.extend({
					template:'#myCpn',
					props:{
						cpName:{
							type:String,
							}
						},
						methods:{
							showOk(){
								console.log('OK')
							}
						}

				})
				

	const app = new Vue({
					el: '#app',
					data: {
						name:'Retr0'
					},
					components:{
						cpn1
					},
					methods:{
						btnClick(){
              console.log(this.$refs.a.showOK()) //$refs 默认是对象类型
							
						}
					}
				})
	      
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Last Updated: 2021/12/19上午12:27:30