Vue 兄弟组件之间的通信

参考：https://blog.csdn.net/weixin_39763493/article/details/107182252

1. Vue中实现兄弟组件的通讯一般为2种方式：

一种方法是让父组件允当两个子组件之间的中间件（中继）；
另一种就是使用EventBus（事件总线），它允许两个子组件之间直接通讯，而不需要涉及父组件。

由于中继方式比较简单，这里不做赘述，只讲EventBus方式。

2. EventBus具体实现

首先在main.js文件中定义一个新的bus对象并且挂载在原型链上，其实他是一个全新的Vue实例：

Vue.prototype.$bus = new Vue()

兄弟组件 a.js 中，声明并监听事件 brotherEvent

created(){this.$bus.$on('brotherEvent', res=>{console.log(res) // 得到123})
}

兄弟组件 b.js 中，触发 $bus 中的brotherEvent

methods:{bAction(){this.$bus.$emit('brotherEvent', ’123‘)}
}

Vue 兄弟组件之间的通信相关推荐

vue兄弟组件之间的通信的使用
一般是页面里面引入两个组件在components 里面注册 components:{//引入的组件名 } 两个组件之间要传值的话要共同引入一下js的一个文件 import eventBus from ...
React（5）React兄弟组件之间的通信
文章目录前言一.兄弟组件之间的通信原理二.三个组件的基本结构 1.子组件ColorSelector的基本结构 2.子组件ColorBoard的基本结构 3.父组件Color的基本结构三.Col ...
vue兄弟组件之间的传值，bus运用，beforeDestroy销毁，Bus.$off
vue兄弟组件之间的传值 1.建立一个单独的文件bus.js import Vue from 'vue' export default new Vue() 2.传递事件 // 传递事件 import ...
前端框架Vue：组件之间的通信、插槽的使用
Vue组件与插槽一.组件化开发思想组件化规范 Web Components 我们希望尽可能多的重用的代码自定义组件的方式不太容易(html,js ,css) 多次使用组件可能导致冲突二.组件注 ...
vue/父子组件之间的通信
父子组件之间的通信父组件绑定数据在组件上子组件props属性接收父组件内的data属性中待传的数据data1 => <cpn :data2="data1">& ...
Vue 兄弟组件之间传值 Bus方法
1.在vue项目中新建一个js文件(文件名:bus.js) import Vue from 'vue'export default new Vue(); 2.在需要传值的页面引用并开始传参 <s ...
vue父子组件、兄弟组件之间的通信和访问
注意:1. vue组件间的通信其实有很多种方法,最常用的还是属性传值.事件传值.vuex; 其他方法参考 https://juejin.im/post/5bd18c72e51d455e3f6e4334 ...
兄弟组件之间如何通信
在工作中有些情景.兄弟之间的通信,可能用vuex 并不方便,所以需要一个中间介质传递一下. Vue 实例实现了一个事件分发接口. 请直接看代码,在初始化web app的时候,给data添加一个名字为 ...
vue 兄弟组件之间的传值
1. 定义一个公共的bus.js //bus.js import Vue from 'vue' export default new Vue() 2. 在子组件A里用$emit发射数据 <scr ...
vue兄弟组件间的通信（事件总线）
一.场景描述导航栏与地图展示区为两个兄弟组件,导航栏组件用到的所有数据都来源于地图区组件通过导航栏按钮切换,控制地图区域数据的变化二.实现步骤 1. 首先两个组件中都引入全局事件总线 import ...

Vue 兄弟组件之间的通信

Vue 兄弟组件之间的通信

1. Vue中实现兄弟组件的通讯一般为2种方式：

2. EventBus具体实现

Vue 兄弟组件之间的通信相关推荐

最新文章

热门文章