vue兄弟组件间的通信（事件总线）

一、场景描述

导航栏与地图展示区为两个兄弟组件，导航栏组件用到的所有数据都来源于地图区组件通过导航栏按钮切换，控制地图区域数据的变化

二、实现步骤

1. 首先两个组件中都引入全局事件总线

import eventBus from "@/utils/eventBus";

eventBus.js中代码：（new一个组件作为中间仓库）

import Vue from 'vue'
export default new Vue()

2. 两个组件的代码

导航栏组件的代码【发送信息】

handleClick() {eventBus.$emit ('一个相同的名字', ' parameter')
}

地图区组件绑定的代码（写在created中）

created() {eventBus.$on("一个相同的名字", (parameter) => {// 写入所用到的事件，例如加载地图、改变图表
this.currentLayer = " parameter "; //来自地图区域数据来源区所用到的参数
this.loadMapData();
…});

vue兄弟组件间的通信（事件总线）相关推荐

Vue 父子组件间的通信
前言在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法父组件传值给子组件,这 ...
Vue父子组件间的通信
父组件通过 props 向下传递数据给子组件,子组件通过 events 向上给父组件发送消息. 父组件: <div><div style="background:#3449 ...
vue兄弟组件之间的通信的使用
一般是页面里面引入两个组件在components 里面注册 components:{//引入的组件名 } 两个组件之间要传值的话要共同引入一下js的一个文件 import eventBus from ...
Vue（组件间通信：props、自定义事件、全局事件总线、消息订阅与发布）
一.props props不仅可以实现父给子传递信息,还可以进行子给父传递信息 1.父给子传递信息: 父组件中给子组件实例传递信息子组件利用props进行接收组件传递信息(接收方式有三种:数组.对象 ...
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
Vue实现组件间通信的七种方式
1. props / $emit 父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信: 父传子:父组件通过import引入子组件,并注册,在子组件标签上添加要传递的属 ...
Vue组件间的通信【子传父，父传子，同级传递，爷孙传递】
Vue组件间的通信引出问题 vue一个重要的思想就是组件化开发,说到组件化开发,提高结构样式行为的复用性,组件写好了,但组件间之间数据如何传递,就成了一个问题- vue 组件之间是可以相互嵌套的,就 ...
vue中组件间通信的6种方式
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的. 除了使用vuex外还有下面6种组件间 ...

vue兄弟组件间的通信（事件总线）

一、场景描述

二、实现步骤

1. 首先两个组件中都引入全局事件总线

2. 两个组件的代码

vue兄弟组件间的通信（事件总线）相关推荐

最新文章

热门文章