欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-09-27 16:32:01
本文介绍使用发布订阅的方式进行vue组件间的通信我认为这种方式比较*, 不存在组件间的关系问题1. 首先安装pubsub-jsnpm install --save pubsub-js2. 订阅方组件...

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

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