中山网站优化排名,免费建立自己喜欢的,做 cad效果图网站,房屋自建设计哪个网站好抛出问题:我们多级组件#xff0c;或者任意不想关的子组件如何传递数据呢#xff1f;
1. 全局事件总线#xff08;$bus#xff09; 一种组件间通信的方式#xff0c;适用于任意组件间通信 全局事件总线示意图#xff1a; 安装全局事件总线#xff1a;
new Vue({..…抛出问题:我们多级组件或者任意不想关的子组件如何传递数据呢
1. 全局事件总线$bus 一种组件间通信的方式适用于任意组件间通信 全局事件总线示意图 安装全局事件总线
new Vue({....beforeCreate(){Vue.prototype.$bus this // 安装全局事件总线$bus就相当于vm}
})使用事件总线 接收数据A组件想接收数据则在A组件中给$bus绑定自定义事件事件的回调留在A组件自身 methods: {demo(data){.....}
},
mounted(){this.$bus.$on(xxx, this.demo)
}提供数据 this.$bus.$emit(xxx, 数据) 最好在beforeDestroy钩子中用$off去解绑当前组件所用到的事件
示例我们继续使用Vue学习计划-Vue2–VueCLi四组件传值和自定义事件示例中的4个组件父组件APP.vue子组件SelectInput.vue、SelectList .vue、SelectMulDel.vue我们这里只更拿App.vue和SelectInput.vue为例 1. 在main.js中安装全局事件总线 2. 子组件SelectInput.vue内提供数据 3. 父组件App.vue内给$bus绑定事件并在beforeDestroy中销毁绑定事件
2. 消息订阅与发布pubsub
一种组件间通信的方式适用于任意组件间通信使用步骤 安装pubsub: npm i pubsub-js或者yarn add pubsub-js或者cnpm i pubsub-js引入: import PubSub from pubsub-js接收数据 A组件想接收数据则在A组件中订阅消息订阅的回调留在A组件自身 methods: {demo(data){.....}
},
mounted(){this.pid PubSub.subscribe(xxx, this.demo) // 订阅消息
}提供数据 PubSub.publish(xxx, 数据)最好在beforeDestroy钩子中用PubSub.unsubscribe(pid)去取消订阅
示例拿$bus的App.vue和SelectInput.vue为 安装依赖不需要main.js内写任何内容但是需要在用到订阅发布的依赖组件内手动引入 修改SelectInput.vue组件 修改App.vue组件 总结一下其实不管是全局事件总线还是消息订阅与发布我们都可以看出来其实本质都是一样的将自定义事件和数据存到一个公共的空间内谁用谁去调。
