5、组件通信
最后更新于:2022-04-02 06:09:27
组件之间除了保持独立之外,还需要相互通信,本章将介绍几种通信的方式。
## 一、直接访问
Vue提供了三个实例属性,可直接访问父组件、子组件和根实例,如下所列。
(1)$parent:父组件。
(2)$root:根实例,如果没有父实例,那么读取的将是自身。
(3)$children:直接子组件,无法获取隔代的子组件,并且不保证组件的顺序,也非响应式。
下面用一个示例来演示它们的用法,首先创建两个父子关系的组件parent和child;接着初始化根实例vm,挂载的\
元素包含parent组件;最后为根实例和parent组件的数据对象添加name属性。
~~~html
~~~
当执行vm.$children时,得到的是一个子组件数组。在child组件的mounted钩子中调用了实例的$parent和$root的name属性,其值分别是“parent”和“root”。
大部分情况下,应当避免直接修改组件的内部,因为这么做不仅让父子组件紧密耦合,而且还难以追踪是谁发起的变更。
## 二、ref和$refs
如果要直接访问子元素或子组件,那么除了使用上文的$children属性之外,还能通过ref特性配合$refs属性实现。
DOM元素或组件可通过声明ref特性来指定一个索引标识符,即注册引用信息。而父组件的$refs属性则记录了声明过ref特性的子元素和子组件,它的值是一个对象,其键就是ref特性的值。下面是一个简单的例子,注册了父组件parent和子组件child,并且为child组件和\元素分别声明了ref特性。
~~~js
Vue.component("child", {
template: '',
mounted: function() {
this.$refs; //{txt: input}
}
});
Vue.component("parent", {
template: ' ',
mounted: function() {
this.$refs; //{child: VueComponent}
}
});
~~~
在两个组件的mounted钩子中,读取了各自实例的$refs属性。如果要在parent组件中读取child组件的$refs属性,那么可以像下面这样。
~~~js
this.$refs.child.$refs
~~~
注意,$refs不是响应式的,并且在渲染到页面之前是无法访问的,即不能在mounted之前的钩子中使用。
当ref特性与v-for指令配合时,引用的将是一个数组,如下所示。
~~~js
Vue.component("child", {
data: function() {
return {
names: ["strick", "freedom"]
};
},
template: `
`,
mounted: function() {
this.$refs; //{txt: [input, input]}
}
});
~~~
## 三、自定义事件
组件支持自定义事件,并且能在子组件中触发该事件,从而实现组件之间的通信。假设有两个父子关系的组件parent和child,在child组件上声明了自定义的dot事件,而在\
';