消息订阅与发布（pubsub）

1. 组件间通信方式，可实现任意组件间通信

2. 使用步骤

   1. 安装pubsub npm i subsub-js

   2. 按需引入 import pubsub from ‘pubsu-js’

   3. 订阅与提供数据

      1. 提供数据

         <button @click="sentStudentName">传递学生姓名给School</button>
         import pubsub from 'pubsub-js'
             methods:{
                 sentStudentName(){
                     pubsub.publish('hello',this.names)
                 }
             }
         

      2. 订阅数据（在接收数据的组件中，订阅的回调留在此组件中）

         import pubsub from 'pubsub-js'
             mounted() {
             // 订阅消息
                this.pubId= pubsub.subscribe('hello',(msgName,data)=>{
                     console.log('hello消息发布了')
                     console.log(msgName)
                     console.log(data)
                 })
             },
             // 取消订阅
             beforeDestroy() {
                 pubsub.unsubscribe(this.pubId)
             }
         

   4. 最好在beforeDestroy钩子中对订阅消息进行取消

Todo-list案例中pubsub

1. 在Item组件中发布删除选项消息
2. 在App组件中订阅该消息

Item组件

        // 删除任务项
        deleteItem(id) {
            if (confirm('确定要删除此任务吗？')) {
                pubsub.publish('deleteTodo', id)
            }
        }

App组件

    mounted() {
       this.pubId=pubsub.subscribe('deleteTodo',this.deleteTodo)
    },
    beforeDestroy() {
        pubsub.unsubscribe(this.pubId)
    }    
    methods:{
            deleteTodo(_,id) {
            this.todoArr = this.todoArr.filter(todo => todo.id !== id)
        },
    }