阅读 70

vue组件通信方式总结

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()解绑监听
复制代码
文章分类
前端
文章标签