todo-list案例--消息订阅与发布

消息订阅与发布: 一种组件间通信的方式，适用于任意组件间通信
使用步骤：
1. 安装pubsub： npm i pubsub-js
2. 引入： import pubsub from 'pubsub-js'
3. 接收数据: A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

methods:{
   demo(data) {
      ....
   }
}
....
mounted() {
   //订阅消息
   this.pid = pubsub.subscribe('xxx',this.demo)
}

4. 提供数据：pubsub.publish('xxx',数据)
5. 最好在beforeCreate()钩子中，用pubsub.unsubscribe(pid)去取消订阅

App.vue

import pubsub from 'pubsub-js'
....
methods:{
   //删除一个todo
   deleteTodo(_,id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
   }
}
...
mounted() {
   //订阅消息
   this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)
},
beforeCreate() {
   //取消订阅
   pubsub.unsubscribe(pubId)
}

MyItem.vue

import pubsub from 'pubsub-js'
....
handleDelete(id) {
   if(confirm('确定删除吗？')){
       //发布消息-提供数据
       pubsub.publish('deleteTodo',id)`
   }
}