Vue 组件通信 二

一、兄弟组件共享数据 ：EventBus

1.安装mitt 依赖包 npm install mitt @版本号

2.创建公共EventBus模块 eventBus.js

// 导入mitt包 
import mitt from 'mitt' 

// 创建EventBus 的实例对象 
const bus = mitt() 

// 将EventBus的实例对象共享出去 
export default bus 

3.在数据接收方，调用 bus.on ('事件名称'，事件处理函数)方法注册一个自定义事件

<script>
import bus from './eventBus.js'
export default {
  data() {
    return {
      xxxNum: 0,
    };
  },
  //组件创建完成时 调用on方法触发事件 
  created() {
    bus.on("xxxChange", (count) => {
      this.xxxNum = xxxNum;
    });
  },
};
</script>

4.在数据发送方，调用 bus.emit ('事件名称'，要发送的数据)方法触发自定义事件

  methods: {
      passEvents(){
          bus.emit('xxxChange',this.data) // 触发自定义事件 + 要传递的参数
      }
  }

二、后代关系组件之间共享数据

指的是父节点的组件向其子孙组件共享数据。 此时组件之间的嵌套关系比较复杂，可以使用 provide 和 inject 实现后代关系 组件之间的数据共享。

父节点的组件可以通过 provide 方法，对其子孙组件共享数据:

provide(){
     return{
          number:count,
     }
 }

子孙节点可以使用 inject 数组，接收父级节点向下共享的数据：

 inject:[ 'count' ]
 

父节点使用 provide 向下共享数据时，可以结合 computed 函数向下共享响应式的数据

<script>
import { computed } from 'vue'
export default {
  data() {
    return {
      xxxNum: 0,
    };
  },
  provide(){
      return{
          //使用computed函数，可以把共享的数据“包装为” 响应式的数据
          xxxNum:computed(()=>this.xxxNum)
      }
  }
};
</script>

子组件中使用响应式数据 使用.value

<script>
import { computed } from "vue";
export default {
  name: "Sonmodule",
  inject: ["xxxNum"], //使用渲染时 {{ xxxNum.value }}
};
</script>

总结

vuex 是终极的组件之间的数据共享方案。在企业级的 vue 项目开发中， vuex 可以让组件之间的数据共享变得高效、清晰、且易于维护。

组件之间的数据共享

1）父子关系

• 父→子传值 ：属性绑定
• 子→父传值： 事件绑定
• 父⇋子相互：组件上的v-model

2）兄弟关系

• EventBus

3）后代关系

• provide & inject

4）全局数据共享

• vuex