当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue组件间的通信pubsub-js实现步骤解析

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

2020年05月10日  | 移动技术网IT编程  | 我要评论

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网