消息的订阅和发布

1、执行npm install --save pubsub-js命令安装pubsub-js

 

2、在需要订阅的组件中引入PubSub

import PubSub from 'pubsub-js'

 

3、在需要订阅的组件中调用PubSub.subscribe方法订阅消息

mounted () {
    // 为ref="header"的组件绑定自定义方法，方法名为addTodo
    // this.addTodo为父组件中定义的方法
    this.$refs.header.$on('addTodo', this.addTodo)
    // 订阅消息，消息名为delTodo，msg就是消息名delTodo
    // data为发布消息时传的参数
    PubSub.subscribe('delTodo', (msg, data) => {
      console.log(msg)
      // 订阅到消息后执行deleteTodo方法
      this.deleteTodo(data)
    })
}

 

4、在需要发布消息的组件中引入PubSub，同步骤2

5、在需要发布消息的组件中调用PubSub.publish方法发布消息

deleteFunc () {
      // 订阅消息delTodo，并传参
      PubSub.publish('delTodo', this.idx)
}

6、总结

6.1、订阅和发布的位置没有限制，可以在同一组件中，也可以在父子组件中，也可以在父孙组件中，比较灵活