概念:Vue全局事件总线的设计思路主要是创建一个可供全局使用的“bus”,当A组件想要收到B组件的数据时,A组件会创建一个自定义事件,所产生的回调也在A组件中,B组件通过调用A组件的自定义事件传递数据,回调的数据就传递给了A组件。通过以下案例描述,将Student姓名传递给School组件的具体实现步骤。
1、在main.js创建安装并暴露一个“$bus”的全局事件总线-列车
new Vue({
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线
}
}).$mount('#app')
2、在Student组件设置自定义事件,调用$bus发送数据。
<template>
<div class="student">
<h1>学生姓名:{
{ StudentName }}</h1>
<h1>学生年龄:{
{ StudentAge }}</h1>
<button @click="sendStudentName">将学生姓名发送给School组件</button>
</div>
</template>
<script>
export default {
name: 'student',
data() {
return {
Student