Vue组件之间的通信方式⭐⭐⭐⭐⭐

标题
父子组件通信	props / $emit
子父组件通信	$emit / v-on
兄弟组件通信	EventBus / Vuex
跨级组件通信	EventBus / Vuex / provide / inject
任意组件通信	EventBus / Vuex

1. 父传子——props / $emit

父组件通过 props 向子组件传递需要的信息。 在子组件中，用props就可以获取到这个值

• 父组件通过v-bind:/:传值，子组件通过props获取
• 或父组件通过v-bind:/:传值，子组件通过 this.$attrs获取
  • 当子组件没有设置props的时候可以使用
  • this.$attrs获取到的是一个对象（所有父组件传过来的集合）

2. 子传父——$emit / v-on

• 子组件的$emit + 父组件设置v-on/@

3. 兄弟组件通信

• 任意组件通信，新建一个空的全局Vue对象，利用emit发送，on接收

/* 1. 新建一个Vue实例作为中央事件总嫌 */
let event = new Vue();

/* 2. 触发事件 */
event.$emit('eventName', '要传的数据')

/* 3. 监听事件 */
event.$on('eventName', ('接收的数据') => {
    //......do something
});

4. 跨级组件通信

（1）eventBus

• 类似的库：mitt库，思路和eventBus类似
• Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() 自定义事件

   Vue.prototype.$eventBus = new Vue();
   $eventBus.$emit(事件名,数据);
   $eventBus.$on(事件名,data => {});

• 示例：
  • ① eventBus.js

  import Vue from 'vue'
  export default new Vue({
    data: {
      isRefresh: false
    }
  })
  

  • ② 引用文件

  import eventBus from './eventBus.js'
  // 操作数据
  eventBus.isRefresh = false
  // 监听数据
  eventBus.$watch('isRefresh', (newValue, oldValue) => {
      // console.log('【eventBus - newValue, oldValue 】-229', newValue, oldValue)
      newValue && this.getTableData() // 这个回调将在 `isRefresh` 改变后调用
  })
  

（2）Vuex

（3）Provide、inject

• 祖先组件使用provide提供数据，子孙组件通过inject注入数据

（4）refs—$ref

• parent、children Ref 获取实例的方式调用组件的属性或者方法

[延伸问题]

1. 在 Vue 中，子组件为何不可以修改父组件传递的 Prop

• 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
• 这样会防止从子组件意外改变父级组件的状态，避免导致应用的数据流向难以理解。