如何使用pubsub-js解析Vue组件间通信的具体步骤？

本文共计355个文字，预计阅读时间需要2分钟。

原文：本文字介绍使用发布订阅模式进行vue组件间通信的方式，我认为这种方式比较自由，不存在组件间的关系问题。+ 1. 首先安装pubsub-js+npm install --save pubsub-js+ 2. 订阅方组件+import PubSub from 'pubsub-js'

修改后：本文字简述通过发布订阅模式在vue组件间进行通信，此法较为灵活，无组件间关联困扰。+ 1. 安装pubsub-js：npm install --save pubsub-js+ 2. 在订阅组件中导入PubSub：import PubSub from '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>

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