组件通信

组件关系

组件关系可以分为父子组件通信、兄弟组件通信、跨级组件通信。

父子组件通信

1. 子组件使用 $emit() 来触发事件，父组件使用 $on() 来监听子组件的事件

v-on 在组件上监听自定义时间外，也可以监听 DOM 事件，这个时候可以使用 .native 修饰符表示监听一个原生事件，监听的是该组件的根元素，示例代码如下：

<my-component @click.native="handleClick" />

2. 使用 v-model

可以在自定义组件上使用 v-model 指令

• 父组件中

    <my-component v-model="total" />

• 子组件中

this.$emit('input', this.counter)

在这里 'input' 相当于一个特殊的语法糖，对应 v-model

v-model 还可以用创建自定义的表单输入组件，进行数据的双向绑定，它需要满足下面两个条件

• 接收一个 value 属性
• 当输入新的 value 时触发 input 事件

非父子组件通信

中央事件总线（bus）

1. 使用一个空的 Vue 实例作为中央事件总线

var bus = new Vue();

2. 组件A 给 组件B 发消息

sequenceDiagram
A->>B: bus.$emit('message', 'content')

3. 组件B 接收 组件A 给的消息

bus.$on('message', function (msg) {
    _this.message = msg;
})

这种方法巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。

父链

在子组件中，使用 this.$parent 可以直接访问该组件的父实例或组件，可以无限向上访问，直到根实例

this.$parent.message = '来自组件 component-a 的内容'

在父组件中，使用 this.$children 可以直接访问该组件的所有子实例和组件，可以无限向下访问，直到最内层的组件

子组件索引

Vue 提供了子组件索引的方法，用特殊的属性 ref 来为子组件指定一个索引名称。

// 父组件中
this.$refs[childrenName]

提示：$refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案，应该避免在模板或计算属性中使用。