Vue组件间的通信pubsub-js实现步骤解析

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。