非父子组件的通信

在开发中构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。

  • Provide/Inject；
  • Mitt全局事件总线；

Provide和Inject

  • Provide/Inject用于非父子组件之间共享数据：
    • 比如有一些深度嵌套的组件，子组件想要获取父组件的部分内容；
    • 在这种情况下，如果仍然将props沿着组件链逐级传递下去，就会非常的麻烦；
  • 对于这种情况下，可以使用 Provide 和 Inject ：
    • 无论层级结构有多深，父组件都可以作为其所有子组件的依赖提供者；
    • 父组件有一个 provide 选项来提供数据；
    • 子组件有一个 inject 选项来开始使用这些数据；
  • 实际上，你可以将依赖注入看作是“long range props”，除了：
    • 父组件不需要知道哪些子组件使用它 provide 的 property
    • 子组件不需要知道 inject 的 property 来自哪里

image.png

Provide和Inject基本使用

  1. provide: {
  2.   job: "web",
  3. },
  1. inject: ["job"],

Provide和Inject函数的写法

如果Provide中提供的一些数据是来自data，那么可能会想要通过this来获取会报错,
这时候我们应该写成函数返回对象的形式。

  1. provide() {
  2.   return {
  3.     job: this.type.job,
  4.     number: this.num,
  5.   };
  6. },

处理响应式数据

  1. provide() {
  2.   return {
  3.     job: computed(() => this.job),
  4.     number: this.num,
  5.   };
  6. },
  • 如果我们修改了this.type.job的内容，那么使用job的子组件是没有反应的：
    • 因为修改了this.type.job之后，之前在provide中引入的 this.type.job 本身并不是响应式的；
  • 那么怎么样可以让数据变成响应式的呢？
    • 可以使用响应式的一些API来完成这些功能，比如说computed函数；
    • 这个computed是vue3的新特性
  • 注意：我们在使用job的时候需要获取其中的value
    • 这是因为computed返回的是一个ref对象，需要取出其中的value来使用；
      1. <p>{{ job.value }}</p>

      全局事件总线mitt库

      Vue3从实例中移除了 $on、$off 和 $once 方法，所以我们如果希望继续使用全局事件总线，要通过第三方的库：
      Vue3官方有推荐一些库，例如 mitt 或 tiny-emitter；
      我们使用一下mitt库：
      npm install mitt

      可以封装一个工具eventbus.js

      ```javascript import mitt from ‘mitt’;

const emitter = mitt();

export default emitter;

  1. ```vue
  2. import emitter from "./util/eventbus";
  4. handleEvent() {
  5.   emitter.emit("cos", { name: "cos", age: 19 });
  6.   emitter.emit("rose", { name: "rose", age: 18 });
  7. },
  1. import emitter from "./util/eventbus";
  2. mounted() {
  3.   emitter.on("cos", (info) => {
  4.     console.log("cos", info);
  5.   });
  7.   emitter.on("rose", (info) => {
  8.     console.log("rose", info);
  9.   });
  11.   emitter.on("*", (type, e) => {
  12.     console.log("*", type, e);
  13.   });
  14. },

Mitt的事件取消

  1. handleClear() {
  2.   emitter.all.clear(); // 取消所有mitt事件
  3. },
  1. data() {
  2.   return {
  3.     onEvent: null,
  4.   };
  5. },
  6. mounted() {
  7.   this.onEvent = function onEvent(ev) {
  8.     console.log("ev", ev);
  9.   };
  10.   emitter.on("cos", this.onEvent);
  11. },
  12. methods: {
  13.   handleClickBtn() {
  14.     emitter.off("cos", this.onEvent);
  15.   },
  16. },

image.png