之前写的TodoList案例，有一个很麻烦的地方，因为数据是写在App.vue组件中的，他的子组件MyList.vue来遍历渲染一个一个的<li>,但是<li>又封装成MyItem.vue组件。修改数据的操作在MyItem.vue组件中，这样导致App.vue中需要传递修改数据的方法到MyList.vue中，MyList.vue继续把方法传递给MyItem.vue，这样逐层传递好麻烦的。

这种逐层传递的实现是用props来做的。

接下来改造成数据总线的方式，代码就很简洁了。这样MyList.vue这里就不要写任何传递的代码了

在 Vue入门011- TodoList案例（组件自定义事件）版本的基础上继续改进

main.js 创建全局事件总线

//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'//关闭Vue的生产提示Vue.config.productionTip = false//创建vmnew Vue({	el:'#app',	render: h => h(App),	beforeCreate() {		Vue.prototype.$bus = this //创建全局事件总线	},})

<template>	<div id="root">		<div class="todo-container">			<div class="todo-wrap">				<MyHeader @addTodo="addTodo"/>				<MyList :todos="todos"/>				<MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>			</div>		</div>	</div></template><script>	import MyHeader from './components/MyHeader'	import MyList from './components/MyList'	import MyFooter from './components/MyFooter.vue'	export default {		name:'App',		components:{MyHeader,MyList,MyFooter},		data() {			return {				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）				todos:JSON.parse(localStorage.getItem('todos')) || []			}		},		methods: {			//添加一个todo			addTodo(todoObj){				this.todos.unshift(todoObj)			},			//勾选or取消勾选一个todo			checkTodo(id){				this.todos.forEach((todo)=>{					if(todo.id === id) todo.done = !todo.done				})			},			//删除一个todo			deleteTodo(id){				this.todos = this.todos.filter( todo => todo.id !== id )			},			//全选or取消全选			checkAllTodo(done){				this.todos.forEach((todo)=>{					todo.done = done				})			},			//清除所有已经完成的todo			clearAllTodo(){				this.todos = this.todos.filter((todo)=>{					return !todo.done				})			}		},		watch: {			todos:{				deep:true,				handler(value){					localStorage.setItem('todos',JSON.stringify(value))				}			}		},		mounted() {			this.$bus.$on('checkTodo',this.checkTodo)			this.$bus.$on('deleteTodo',this.deleteTodo)		},		beforeDestroy() {			this.$bus.$off('checkTodo')			this.$bus.$off('deleteTodo')		},	}</script><style>	...</style>

代码解释

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

往事件总线上注册2个事件checkTodo 和 deleteTodo，分别对应各自的回调函数

MyItem.vue 组件

<template>	<li>		<label>			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>			<span>{{todo.title}}</span>		</label>		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>	</li></template><script>	export default {		name:'MyItem',		//声明接收todo		props:['todo'],		methods: {			//勾选or取消勾选			handleCheck(id){				//通知App组件将对应的todo对象的done值取反				this.$bus.$emit('checkTodo',id)			},			//删除			handleDelete(id){				if(confirm('确定删除吗？')){					//通知App组件将对应的todo对象删除					this.$bus.$emit('deleteTodo',id)				}			}		},	}</script><style scoped>	/*item*/</style>

this.$bus.$emit('checkTodo',id)

触发事件总线上的checkTodo事件，注册事件的组件就会收到消息，id就是参数

this.$bus.$emit('deleteTodo',id)

触发事件总线上的deleteTodo事件，注册事件的组件就会收到消息，id就是参数

代码摘录于尚硅谷Vue学习课件