一、非父子组件的通信
在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信。
这里我们主要讲两种方式:
Provide/Inject;
pMitt全局事件总线;
1. Provide和Inject
Provide/Inject用于非父子组件之间共享数据:
比如有一些深度嵌套的组件,子组件想要获取父组件的部分内容;
在这种情况下,如果我们仍然将props沿着组件链逐级传递下
去,就会非常的麻烦;
对于这种情况下,我们可以使用 Provide 和 Inject : 无论层级结构有多深,父组件都可以作为其所有子组件的依赖
提供者;
父组件有一个 provide 选项来提供数据;
子组件有一个 inject 选项来开始使用这些数据;
实际上,你可以将依赖注入看作是“long range props”,除了:
父组件不需要知道哪些子组件使用它 provide 的 property
子组件不需要知道 inject 的 property 来自哪里
2.Provide和Inject基本使用
3.Provide和Inject函数的写法
4.处理响应式数据
5.全局事件总线mitt库
Vue3从实例中移除了
o
n
、
on、
on、off 和 $once 方法,所以我们如果希望继续使用全局事件总线,要通过第三方的库:
Vue3官方有推荐一些库,例如 mitt 或 tiny-emitter; 这里我们主要讲解一下mitt库的使用;
首先,我们需要先安装这个库:
npm install mitt
6.使用事件总线工具
7.Mitt的事件取消
二、认识插槽Slot
1.如何使用插槽slot?
2.插槽的基本使用
3.插槽的默认内容
4.多个插槽的效果
5.具名插槽的使用
6.动态插槽名
7.具名插槽使用的时候缩写
8.渲染作用域
9.认识作用域插槽
10.独占默认插槽的缩写
11.默认插槽和具名插槽混合