作用:非父子组件之间,进行简易消息传递。
1、创建一个都能访问的时间总线
import Vue from 'vue'
const Bus = new Vue()
export default Bus
2、A组件(接收方),监听Bus实例的事件
created () {
Bus.$on('sendMsg', (msg) => {
this.msg = msg
})
}
3、B组件(发送方),触发Bus实例的事件
Bus.$emit('sendMsg', '这是一个消息')
App.vue
<template>
<div class="app">
<BaseApple></BaseApple>
<BaseBoy></BaseBoy>
</div>
</template>
<script>
import BaseApple from './components/BaseApple.vue';
import BaseBoy from './components/BaseBoy.vue';
export default {
components: {
BaseApple,
BaseBoy
}
}
</script>
<style>
</style>
BaseApple.vue
<template>
<div>
我是接收方
<strong><span>{{ msg }}</span></strong>
</div>
</template>
<script>
import Bus from '../utils/EventBus';
export default {
data() {
return {
msg: ''
}
},
created() {
Bus.$on('sendMsg', (msg) => {
this.msg = msg
console.log(this.msg);
})
}
}
</script>
<style scoped>
div{
width: 205px;
height: 190px;
border: 3px solid black;
border-radius: 5px 6px;
}
</style>
BaseBoy.vue
<template>
<div>
我是发布方
<button @click="send">发布</button>
</div>
</template>
<script>
import Bus from '../utils/EventBus'
export default {
methods: {
send() {
Bus.$emit('sendMsg', new Date())
}
}
}
</script>
<style scoped>
div{
width: 205px;
height: 190px;
border: 3px solid black;
border-radius: 5px 6px;
}
</style>
EventBus.js
// 创建一个都能访问到的事件组件
import Vue from "vue"
const Bus = new Vue()
export default Bus