非父子组件之间的通信方式与 mitt 库🔥
Hello,又见面了,我是渔戈!
今天我们来讲讲 Vue 组件开发中的非父子组件之间的通信方式以及 mitt 库
1.非父子组件的通信
在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信。
这里我们主要讲两种方式:
Provide/Inject;
Mitt 全局事件总线;
1.1 Provide 和 Inject
Provide/Inject 用于非父子组件之间共享数据:
比如有一些深度嵌套的组件,子组件想要获取父组件的部分内容;
在这种情况下,如果我们仍然将 props 沿着组件链逐级传递下去,就会非常的麻烦;
对于这种情况下,我们可以使用 Provide 和 Inject :
无论层级结构有多深,父组件都可以作为其所有子组件的依赖提供者;
父组件有一个 provide 选项来提供数据;
子组件有一个 inject 选项来开始使用这些数据;
实际上,你可以将依赖注入看作是“long range props”,除了:
父组件不需要知道哪些子组件使用它 provide 的 property
子组件不需要知道 inject 的 property 来自哪里
1.2 Provide 和 Inject 基本使用
我们开发一个这样的结构:
![](https://static001.geekbang.org/infoq/8d/8dbc416bf2298b6426fbc4510e72c0f6.png)
1.3 Provide 和 Inject 函数的写法
如果 Provide 中提供的一些数据是来自 data,那么我们可能会想要通过 this 来获取:
这个时候会报错:这里给大家留一个思考题,我们的 this 使用的是哪里的 this?
![](https://static001.geekbang.org/infoq/4d/4d8e0764e49c094997535c263fc5cf35.png)
1.4 处理响应式数据
我们先来验证一个结果:如果我们修改了 this.names 的内容,那么使用 length 的子组件会不会是响应式的?
我们会发现对应的子组件中是没有反应的:
这是因为当我们修改了 names 之后,之前在 provide 中引入的 this.names.length 本身并不是响应式的;
那么怎么样可以让我们的数据变成响应式的呢?
非常的简单,我们可以使用响应式的一些 API 来完成这些功能,比如说 computed 函数;
当然,这个 computed 是 vue3 的新特性,在后面我会专门讲解,这里大家可以先直接使用一下;
注意:我们在使用 length 的时候需要获取其中的 value
这是因为 computed 返回的是一个 ref 对象,需要取出其中的 value 来使用;
![](https://static001.geekbang.org/infoq/f7/f7109bf6932a43245e7eba823e07938c.png)
2.全局事件总线 mitt 库
Vue3 从实例中移除了 off 和 $once 方法,所以我们如果希望继续使用全局事件总线,要通过第三方的库:
Vue3 官方有推荐一些库,例如 mitt 或 tiny-emitter;
这里我们主要讲解一下 mitt 库的使用;
首先,我们需要先安装这个库:npm install mitt
其次,我们可以封装一个工具 eventbus.js:
![](https://static001.geekbang.org/infoq/03/03e4c55bbdc62a9107ded0c0c632653e.png)
2.1 使用事件总线工具
在项目中可以使用它们:
我们在 Home.vue 中监听事件;
我们在 App.vue 中触发事件;
![](https://static001.geekbang.org/infoq/a3/a3e341f8dd0abab1c9b5442deeb2e2c9.png)
2.2 Mitt 的事件取消
在某些情况下我们可能希望取消掉之前注册的函数监听:
![](https://static001.geekbang.org/infoq/9f/9f6430add7034a25a1a1cf3c75d27a19.png)
本次的分享就到这里,如果本章内容对你有所帮助的话欢迎点赞+收藏。文章有不对的地方欢迎指出,有任何疑问都可以在评论区留言。希望大家都能够有所收获,大家一起探讨、进步!
![](https://static001.geekbang.org/infoq/1c/1c95d2e1a01157851f83da9d63f2c295.png)
相关文章:
版权声明: 本文为 InfoQ 作者【渔戈】的原创文章。
原文链接:【http://xie.infoq.cn/article/ce6afb70ccd348594db317dbf】。文章转载请联系作者。
评论