本文介绍使用发布订阅的方式进行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>