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

发布时间：2020-09-18 23:14:52 阅读：531 作者：我太难了008 栏目：web开发

Vue开发者专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

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

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

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

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

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签