初始化
- 新建js文件创建一个EventBus的实例化对象
import Vue from 'vue'
export const EventBus = new Vue()
- 或者直接在Vue()的原型中,直接引入EventBus (不推荐)
发送事件
用EventBus.$emit(‘为这次传值事件起个名字’,要传输的数据)方法发送事件
<template>
<div>
<button @click="giveIt">传参</button>
</div>
</template>
<script>
import {EventBus} from "@/api/EventBus";
export default {
name: "BigView",
methods: {
giveIt() {
EventBus.$emit('bigMsg','大伙计的数据')
}
}
}
</script>
接受事件
用EventBus.$on(‘对应的事件名字’,回调函数(其参数为传过来的值))方法接受事件
<template>
<div>
{{ msg }}
</div>
</template>
<script>
import {EventBus} from "@/api/EventBus";
export default {
name: "SmallView",
data() {
return {
msg: '',
}
},
mounted() {
EventBus.$on('bigMsg', (res)=> {
this.msg = res
})
}
}
</script>
输出结果如下: