vue组件间的通信之pubsub-js

Posted 2020-11-28

本文介绍使用发布订阅的方式进行vue组件间的通信

我认为这种方式比较自由， 不存在组件间的关系问题

 

 

1. 首先安装pubsub-js

npm install --save pubsub-js

 

2. 订阅方组件

  import PubSub from ‘pubsub-js‘

    mounted(){ // 执行异常代码
      // 订阅消息
      PubSub.subscribe(‘deleteTodo‘,(msg,index)=>{
        this.deleteTodo(index)  // 调用deleteTodo方法执行真正的业务逻辑
      });
    },

 

3. 发布方组件

<script>
  import PubSub from ‘pubsub-js‘
  export default{
    methods: {
      handlerEnter(isEnter){
        if (isEnter) {
          this.bgColor = ‘gray‘;
          this.isShow = true;
        } else {
          this.bgColor = ‘white‘;
          this.isShow = false;
        }
      },
      deleteItem(){
        // 表示从this对象中取出todo,index,deleteTodo三个对象
        const {todo, index, deleteTodo} = this
        if (window.confirm(`确认删除${todo.title}吗？`)) {
          // 发布消息
          PubSub.publish(‘deleteTodo‘, index);  //deleteTodo一定要与订阅方名称一样，index是通信的具体数据

        }

      }
    }
  }
</script>