day82-todolist全局事件总线改进

通过组件全局事件总线，完成消息的传递，改进todolist案例

head

 methods:{
   add(){
     //校验数据
     if (!this.title.trim()) return alert("输入不能为空")
     //将输入包装成todo对象
     const todoObj={id:nanoid(),title:this.title,done:false}
     //通知app组件添加一个todo对象
     this.$emit('addTodo',todoObj)
     //清空输入
     this.title=''
   }
 },

 

footer

 methods: {
   checkAll(e){
     this.$emit('checkAllTodo', e.target.checked)
     // this.checkAllTodo(e.target.checked)
   },
 ​
   clearAll() {
     if(confirm("确定清除吗？")){
       this.$emit('clearAllTodo')
       // this.clearAllTodo()
     }
 ​
   }
 }

 

item

 methods: {
   //勾选或取消勾选
   handleCheck(id) {
     // 通知App组件将对应todo的done取反
     // pubsub.publish('checkTodo', id)
     // this.checkTodo(id)
     this.$bus.$emit('checkTodo',id)
   },
   handleDelete(id) {
     if(confirm('确定删除吗？')){
       // 通知App组件删除对应的todo
       // pubsub.publish('deleteTodo', id)
       this.$bus.$emit('deleteTodo',id)
     }
   },

 

app

 mounted() {
   // this.pubId_check = pubsub.subscribe('checkTodo', this.checkTodo)
   // this.pubId_delete = pubsub.subscribe('deleteTodo', this.deleteTodo)
   // this.pubId_update = pubsub.subscribe('updateTodo', this.updateTodo)
   this.$bus.$on('checkTodo',this.checkTodo)
   this.$bus.$on('deleteTodo',this.deleteTodo)
 },
 beforeDestroy() {
   // pubsub.unsubsribe(this.pubId_check)
   // pubsub.unsubsribe(this.pubId_delete)
   // pubsub.unsubsribe(this.pubId_update)
   this.$bus.$off('checkTodo')
   this.$bus.$off('deleteTodo')
 ​
 },

 

 <div class="todo-wrap">
 ​
   <HeaderCom @addTodo="addTodo"></HeaderCom>
 ​
   <ListCom :todoList="todoList"></ListCom>
 ​
   <FooterCom :todoList="todoList" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"></FooterCom>
 </div>