Vue.js 中使用PubSub.js 进行同级组件间通信

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>