-
实现任意组件间的通信
-
数据发送方,调用$emit('事件名称',要发送的数据) 数据接收方,调用$on('事件名称',事件处理函数) 最后在beforeDestory()函数中解绑自定义事件
-
安装全局事件总线$bus
$on,$emit,$off属性只有在vue.prototype上才有,而vc,vm都可以访问vue.prototype,所以每个组件都可以获得$on,$emit,$off属性,将$bus绑定在vue.prototype上,每个组件都可以看见它,并且将$bus配置为vm,即$bus也会拥有$on,$emit,$off属性
new Vue({ render: h => h(App), beforeCreate() { Vue.prototype.$bus = this //this就是vm } }).$mount('#app')
-
使用事件总线
-
接受数据:A组件想接受数据,就在A组件中给$bus绑定自定义事件,事件的回调留在A组件
methods: { //改变done的值 checkTodos(id) { this.todos.forEach((todo) => { if (todo.id == id) todo.done = !todo.done; }); }, }, created() { this.$bus.$on("checkTodos", this.checkTodos); //第一个是事件名,第二个是要执行的回调函数,也可以直接写成箭头函数 this.$bus.$on('checkTodos',(val)=>{ this.todos = val }) }, beforeDestroy() { this.$bus.$off("checkTodos"); },
5. 提供数据 this.$bus.$emit("checkTodos", id);
-
全局事件总线
最新推荐文章于 2024-08-22 16:04:37 发布