ToDoList全局事件总线学习笔记

全局事件总线

全局事件总线：任意组件间通信

安装全局事件总线

new Vue({……beforeCreate(){Vue.prototype.$bus=this},……
})

使用事件总线

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){demo(data){}mounted(){this.$bus.$on('xxx',this.demo)}}

提供数据：this. $b u s .$ emit(‘xxx’,this.demo)

注意

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

ToDoList中的实践

通过全局事件总线实现item给app传值。

安装全局事件总线

import Vue from 'vue'
import App from './App.vue'// 关闭vue的生产提示
Vue.config.productionTip = false;new Vue({el: '#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this}
})

App.vue与MyList.vue中的操作
App.vue取消给List传的方法，MyList取消props接收的方法

在这里插入图片描述

Item给App传递数据
app收数据，app绑定事件总线的自定义事件

  mounted() {this.$bus.$on('checkTodo', this.checkTodo)this.$bus.$on('deleteTodo', this.deleteTodo)},beforeDestroy() {this.$bus.$off('checkTodo')this.$bus.$off('deleteTodo')}

触发

methods: {handleCheck(id) {this.$bus.$emit('checkTodo',id)},handleDelete(id) {if (confirm('确定删除吗？')) {this.$bus.$emit('deleteTodo', id)}}},this.$bus.$emit('deleteTodo', id)}}},

在这里插入图片描述