Vue组件间的通信pubsub-js实现步骤解析
2020-04-10 12:04
405 查看
本文介绍使用发布订阅的方式进行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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- vue工程利用pubsub-js实现兄弟组件之间的通信
- Vue.js 中使用PubSub.js 进行同级组件间通信
- pubsub-js 实现RN组件间通信
- 在VUE里使用全局公共组件(自定js文件)的简单方法,bus实现父子或兄弟组件用$emit的通信方法
- 说说在 Vue.js 中如何实现组件间通信
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- Vue.js解析(十)【Vue组件间通信】
- Vuejs第十篇之vuejs父子组件通信
- 父子组件通信vue.js
- vue.js开发实现全局调用的MessageBox组件实例代码
- Vue.js组件tabs实现选项卡切换效果
- vue2.0父子组件间通信的实现方法
- Vue.js、vue安装步骤、单文件组件、模板指令
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- Vuejs——(10)组件——父子组件通信
- vue.js父子组件通信动态绑定
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue采用EventBus实现跨组件通信及注意事项小结