基于vue-cli实现各种关系组件间的通信

根据组件关系划分

1. 父子

   1. props/$emit,$on
   2. $parent/$children
   3. $refs

2. 兄弟

   1. Bus
   2. Vuex

3. 跨级

   1. Bus
   2. Vuex
   3. provide / inject
   4. $attrs/$listeners

父子

props/$emit,$on

父

子

props/$emit,$on(v-model写法)

v-model 是一个语法糖，可以拆解为 props: value 和 events: input。就是说组件必须提供一个名为 value 的 prop，以及名为 input 的自定义事件

父

子(不用修改)

props/$emit,$on(.sync写法)

.sync 不是真正的双向绑定，而是一个语法糖，修改数据还是在父组件完成的，并非在子组件

父

子

$refs/$parent,$children

父

子

兄弟

bus

/tools/bus.js

import Vue from 'vue'
export default new Vue()

父

子 test4-a

子 test4-b

跨级

provide / inject（父级与后代）

//app.vue

任何页面组件

$attrs/$listeners

爷

父

孙