1. 在main.js中安装全局事件总线
// 引入vue app
import Vue from "vue";
import App from "@/App";
// 关闭生产提示
Vue.config.productionTip = false
// 创建vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this // 安装全局事件总线
}
})
2. school组件绑定hello自定义事件
<template>
<div class="school">
<h2>学校名字:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "School",
data(){
return {
name:'王小虎',
address:'北京',
}
},
mounted() {
this.$bus.$on('hello', (data)=>{
console.log('我是School组件,收到数据:', data)
})
},
beforeDestroy() {
// 解绑事件 组件销毁时解绑事件
this.$bus.$off('hello')
}
}
</script>
<style scoped>
.school{
background-color: lightpink;
padding: 5px;
}
</style>
3.student组件触发hello自定义事件
<template>
<div class="student">
<h2>学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
<button @click="sendStudentName">把学生名字给school组件</button>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Student",
data(){
return {
name:'张三',
sex:'男',
}
},
mounted() {
},
methods:{
sendStudentName(){
this.$bus.$emit('hello', this.name)
}
}
}
</script>
<style scoped>
.student{
background-color: greenyellow;
}
</style>