vue组件通信方式汇总
组件之间的关系:
1.父子
2.祖孙
3.兄弟
4.其它
vue组件间通信方式:
1.props
2.自定义事件
3.全局事件总线
4.消息订阅与发布
5.slot插槽
6.vuex
1.props:
1.此方式用于父组件与子组件之间传递数据
2.所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
问题:
1.如果需要向非子后代传递数据必须多层逐层传递
2.兄弟组件间也不能直接props通信, 必须借助父组件才可以
2.vue自定义事件
1. 用来实现子组件向父组件通信的方式, 功能类似于函数类型的props
2. 实现流程
(1) 父组件:
1.组件标签属性或mounted(): 给子组件对象绑定事件监听, 用于接收数据
2.在beforeDestroy(): 通过子组件对象解绑对应的事件监听
(2) 子组件:
通过当前组件对象分发事件, 传递数据值
3.消息订阅与发布
1. 消息订阅与发布与全局事件总线一样都可以实现任意组件间通信
2. 但需要额外引入第三方实现库, 而全局事件总线不用, 一般在vue项目中不用
3. 实现流程
(1) 在接收数据的组件:
1.mounted(): 订阅消息, 在回调函数中接收数据并处理
2.beforeDestroy(): 取消订阅
(2) 在发送数据的组件: 发布消息
4.slot插槽
1. 当一个组件有不确定的结构时, 就需要使用slot技术
2. 注意: 插槽内容是在父组件中编译后, 再传递给子组件
(1) 当只有一个不确定的结构时, 可以使用默认slot
(2) 当有多个不确定的结构时, 可以使用命名slot
3. 特殊情况：如果决定结构的数据在子组件, 那需要使用作用域插槽
5.全局事件总线
1. 全局事件总线是任意关系的组件间通信(传值/数据)的解决方案
2. 全局事件总线是一个对象, 有事件处理的相关方法, 在vue中就是vm对象
3. 实现流程
(1) 将新创建的vm或最外层已有的vm作为总线对象保存到Vue的原型对象上
(2) 需要传值/数据的组件: 得到总线对象, 调用其$emit()分发事件, 携带数据
(3) 需要接收消息/数据的组件:
① 在mounted()中: 得到总线对象, 调用其$on()绑定监听, 接收数据
② 在beforeDestroy()中: 得到总线对象, 调用其$off()解绑监听
