vue 组件通信方式

1. 父组件将自己的状态分享给子组件使用；

   方法：父组件通过子标签传递数据，子组件通过 props 接收

2. 子组件改变父组件的状态;

   方法：父组件在子标签上通过@abc 提供一个改变自身状态的方法，子组件通过$emit("abc", payload)触发这个函数

3. 父组件直接改变子组件的状态；

   方法：父组件设法($ref,$children[0])拿到子组件实例对象，然后通过实例对象直接修改子组件状态

4. 子组件直接改变父组件的状态

   方法：子组件通过$parent拿到父组件的改变自身状态的方法，然后直接调用（$parent 可以拿到父组件状态，但是最好不要直接修改，而是通过父组件函数式修改，保持单向数据流）

5. 父组件通过插槽向子组件传递数据

   方法：子组件定义具名插槽，父组件向插槽内传递自己的状态

6. 父组件向后代组件传值

   方法：父组件正常在标签上向子组件传递数据，子组件不用 props 接收属性，通过$attrs获取属性，通过$listeners 获取方法。子组件再向下传递时，使用 v-bind="$attr"传递属性，使用v-on="$listeners"传递方法

7. 父组件向后代组件传值

   方法：父组件js中定义provide函数提供数据源，后代组件通过inject去接收，inject可以是一个数组或对象。

   注意：父组件提供的数据源如果不是响应式的，那么后代修改数据，数据不会响应变化。如果父组件提供的数据源是响应式的，但是不是一个对象，那么它也不是响应式的，所以要用对象在外包一层对象（数组不行）。另外，如果子组件同时provide一个inject祖先组件相同名称的数据，那么子组件的后代会就近使用子组件的数据。

   官网tip：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

   https://cn.vuejs.org/v2/api/#provide-inject

8. 全局通信-事件总线

   方法：通过注册一个新的vue实例作为桥梁，使用$on和$emit来完成通信

9. 全局通信-vuex

   略（看官方文档喽）

   https://vuex.vuejs.org/zh/

第一种： props传参

// 父组件向子组件传递msg




// 子组件props接收

第二种：emit，on通信

// 父组件向子组件提供改变自己状态的函数





// 子组件不用接收，直接通过$emit触发并传参就行

第三种：$ref,$children实例通信

// 父组件通过$ref或者$children拿到子组件实例，然后直接修改子组件状态
/**
 * this.$children`数组中的元素不是响应式的，并且下标并不一定对用父组件引用的子组件的顺序，例如有异步加载的子组件，可能影响其在 children 数组中的顺序。所以使用时需要根据一定的条件例如子组件的name去找到相应的子组件。
 **/






// 子组件等着被改就行

第四种：$parent通信

// 父组件




// 子组件通过$parent拿到父组件实例，然后直接修改父组件状态

第五种：插槽通信（一般不用）

// 父组件





// 子组件定义插槽

第六种：$attr,$listener深层双向通信

// 父组件






// 儿子组件




// 孙子组件

第七种：provide，inject依赖注入深层次单向通信

// 父组件





// 儿子组件





// 孙子组件

第八种： $bus事件总线全局通信

// 父组件通过this.$bus.$on监听事件





// 孙子组件通过this.$bus.$emit触发事件