bus.js非父子组件之间通讯

区别：
bus.js就是一个公共的vue实例专门处理emit和on事件。
vuex.js是做全局数据处理的，是指限定了对公共数据的使用处理方法，统一管控

vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。
bus适合小项目、数据被更少组件使用的项目，对于中大型项目数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过emit向外发布一个事件,在需要监听的页面，通过emit向外发布一个事件,在需要监听的页面，通过emit向外发布一个事件,在需要监听的页面，通过on监听事件。

vuex适用中大型项目、数据在多组件之间公用的情况。

1.bus.js文件: assets目录下

import Vue from 'vue'
//  创建通讯实例
var bus = new Vue()
export default bus

2.在需要通讯的页面引入：

import Bus from '@/assets/common/bus'

3.在数据发起方发送：

Bus.$emit('getCode',this.openDialog1.groupid)

4.数据接收方获取：mounted里

Bus.$on('getCode', function (msg) { // 获取小助手列表var param = new FormData()param.append('groupid', msg)_PhPApi.getGroupInfo(param).then(res => {this.tableData = res.data.assistantInfo})
}.bind(this))

bus.js非父子组件之间通讯相关推荐

vue2.0 非父子组件之间的单一事件通信
前言 vue官网指出: 通过使用事件中心,允许组件自由交流,无论组件处于组件树的哪一层.由于 Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的 Vue 实例来实现这个目的. 也就是说非父 ...
vue父子组件及非父子组件之间的传值
一.父组件向子组件传值在vue中通常使用props向子组件传递数据 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后 ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
020_Vue非父子组件之间数据交互
1. 非父子组件之间数据交互 1.1. 单独的事件中心管理组件间的通信 var eventHub = new Vue(); 1.2. 监听事件 eventHub.$on('event-name', f ...
Vue非父子组件之间的通信
文章目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 ...
Vue入门八、非父子组件间通讯
通过Bus总线机制实施非父子组件通讯 1.创建一个空实例(Bus中央事件总线也可以叫中间组件) 2.利用$emit $on 触发和监听事件实现非父子组件的通信组件之间使用this.$bus.$on传 ...
Vue非父子组件之间传值
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>非父子 ...
VUE非父子组件之间通信的几种方式
一.使用广播的方式$emit(), $on() 1.创建js文件 import Vue from 'vue'export default new Vue() 组件A import bus from ' ...
vue学习【非父子组件传值问题（Bus/总线/观察者模式）】
如果两个组件是父子关系,就可以通过props的方式传值. 父组件通过props向子组件传值,子组件通过事件触发向父组件传值那么如果两个组件之间不具备父子关系,该如何传值呢?任何一个网页都可以拆分成几 ...

bus.js非父子组件之间通讯

bus.js非父子组件之间通讯

1.bus.js文件: assets目录下

2.在需要通讯的页面引入：

3.在数据发起方发送：

4.数据接收方获取：mounted里

bus.js非父子组件之间通讯相关推荐

最新文章

热门文章