Vue2.0开发之——组件数据共享-Eventbus(39)

一 概述

  • 兄弟组件之间数据共享的方案—EventBus
  • EventBus的使用步骤
  • EventBus的使用示例

二 兄弟组件之间数据共享的方案—EventBus

在 vue2.x 中,兄弟组件之间数据共享的方案是EventBus。

三 EventBus的使用步骤

  • 创建 eventBus.js 模块,并向外共享一个 Vue 的实例对象
  • 在数据发送方,调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件
  • 在数据接收方,调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

四 EventBus的使用示例

4.1 创建Eventbus.js

1
2
3
import Vue from 'vue'

export default new Vue()

4.2 数据发送方Left.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 1. 导入 eventBus.js 模块
import bus from './eventBus.js'
export default {
props: ['msg', 'user'],
data() {
return {
str: `黑云压城城欲摧,渚青沙白鸟飞回。借问酒家何处是,半江瑟瑟半江红!`
}
},
methods: {
send() {
// 2. 通过 eventBus 来发送数据
bus.$emit('share', this.str)
}
}
}

布局内容

1
<button @click="send">把好诗发给 Right</button>

4.3 数据接收方Right.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 1. 导入 eventBus.js 模块
import bus from './eventBus.js'

export default {
data() {
return {
// 子组件自己的数据,将来希望把 count 值传给父组件
count: 0,
msgFromLeft: ''
}
},
created() {
// 2. 为 bus 绑定自定义事件
bus.$on('share', val => {
console.log('在 Right 组件中定义的 share 被触发了!', val)
this.msgFromLeft = val
})
},
methods: {
add() {
// 让子组件的 count 值自增 +1
this.count += 1
// 把自增的结果,传给父组件
this.$emit('numchange', this.count)
}
}
}

布局内容

1
2
3
4
5
6
7
8
<template>
<div class="right-container">
<h3>Right 组件 --- {{ count }}</h3>
<button @click="add">+1</button>
<hr />
<p>{{ msgFromLeft }}</p>
</div>
</template>

4.4 效果图