Vue通信方式

分类

• 父子组件通信: props; $parent / $children; provide / inject ; ref ; $attrs / $listeners
• 兄弟组件通信: eventBus ; vuex
• 跨级通信: eventBus；Vuex；provide / inject 、$attrs / $listeners

Vue的通信方式根据使用场景可以分为以下几类：

• 父子组件通信
• 兄弟组件通信
• 跨组件通信

父子组件通信

1. props/$emit

   • 父组件通过 props 向子组件内进行值传递；
   • 子组件通过向父组件触发 $emit 事件进行传递；

2. eventBus
   通过 Vue 创建一个空的实例进行事件的传递

   var eventBus = new Vue();
   // 触发事件
   eventBus.$emit('eventName', {});
   //事件接收者
   eventBus.$on('eventName', data => console.log(data));

3. $parent/$children

   • $parent： 组件中可以使用 $parent获取到父对象来进行通信；$root 节点的 $parent 对象 为 undefined， 可以通过 $root 来获取根节点。 通过 $parent 获取到的对象为 Vue对象。
   • $children： 可以使用组件的 $children 来进行通信，获取到的对象是 数组 类型，所以需要用 索引 来获取组件

4. ref
   通过设置 $ref 来获取组件对象；$ref 增加到 $dom元素上，获取的就是$dom元素；增加到组件上，获取的就是组件对象。

兄弟组件通信

1. eventBus
2. Vuex

跨组件通信

1. evnetBus

2. Vuex

3. provide/inject
   允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。这两个必须匹配使用。默认的数据不是响应式的，也就是说更改属性后不会同步更新，需要手动实现响应式数据绑定。

   export default {
     provide: {
       videoName: 'test.mp4'
     }
   }

   export default {
     inject: ['videoName'],
     mounted () {
       console.log(this.videoName);  // test.mp4
     }
   }

4. $attrs/$listeners