vue组件通信你还在用笨重的vuex吗

很长一段时间在vue开发项目中组件间通信都是通过vuex实现的，有时候开发一个小项目也要用到插入笨重的vuex来实现组件间交互，有没有一个好的插件可以替代vuex，emmmm~，当然有了！今天给大家介绍一下PubSubJS，PubSubJS是什么？可以实现什么功能？看下面的例子实现关闭弹窗model1

主页面index.vue代码如下

export default { data() {return {box: {model1:false}}
},
created() {
//订阅关闭弹窗事件PubSub.subscribe("modelClose", (event, data) => {this.close(data.modal);console.log(data.mess) //打印"关闭弹窗"});
},methods: {close(model) {this.box[model] = false}}
}

model1.vue组件

export default{
data(){
return{}
},
methods:{close(){//发布关闭弹窗事件PubSub.publish("modelClose", {model:"model1",mess:"关闭弹窗"});}
}
}

上面简单的代码就实现了子组件和父组件通信功能，你可能很不屑得说，vue自带的on和emit不就可以实现这个功能干嘛搞这么麻烦，对的，on和emit的确也可以实现了子组件和父组件通信，但是如果是非父子组件通信呢，用on和emit实现是不是就显得很繁琐了，另外PubSubJS不依赖于任何库和不限于任一框架

不管是父子之间还是非父子之间通信PubSubJS都可以实现，但是必须先执行订阅事件subscribe然后才能publish发布事件

源码地址：https://github.com/mroderick/PubSubJS

vue组件通信你还在用笨重的vuex吗相关推荐

vue 组件通信的几种方式
前言在vue中, 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还 ...
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
文章目录一.案例概述二.代码准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...
vue组件通信（传值）
vue组件通信有以下几种方式可以实现(个人总结) 一.父组件到子组件传值方式: 一般通过在父组件中给子组件绑定属性的方式进行传值,子组件通过props来接收. 实例: //父组件 <templa ...
【Vue】Vue全家桶（三）Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
Vue组件通信的五种方式
Vue组件通信的五种方式文章目录 Vue组件通信的五种方式一. props/$emit(父子通信) 二. vuex(组件之间通信) 三. 事件总线EventBus(组件之间通信) 四. provi ...
vue组件通信的几种方式
vue组件通信的几种方式最近用vue开发项目,记录一下vue组件间通信几种方式第一种,父子组件通信一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...
Vue 组件通信之 Bus
关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...
vue组件通信v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置父组件关键代码如下: 1 <tem ...

vue组件通信你还在用笨重的vuex吗

vue组件通信你还在用笨重的vuex吗相关推荐

最新文章

热门文章