1.事件总线event bus(发布订阅模式 1对多)
- 适用于简单场景
事件总线流程
1.创建一个事件总线即空的Vue实例
- 导入Vue
- let Bus=new Vue()
- 导出 export default Bus
2.接收方利用事件总线Bus监听事件(订阅)建议在created钩子函数中监听
- 导入Bus
- Bus.$on(事件名,()=>{逻辑处理})
3.发布者利用事件总线Bus派发事件(发布)
- 导入Bus
- Bus.$emit("事件名",参数)
案例:
效果展示
2.provide & inject(跨层级共享数据 父和子孙组件)
流程
1.父组件利用 provide函数 提供数据
- 简单数据是非响应式的(修改后,子孙组件不会实时更新)
- 复杂数据类型是响应式的
- provide(){
return {
key1:v1,
key2:v2
}
}
2.子孙组件使用 inject属性 接受数据
- inject:[参数1,参数2,.....]