全局事件总线(GlobalEvenBus)
1.一种组件间通信的方式 适用于任意组件间通信
2.安装全局事件总线:在入口文件main.js中
// 该项目的入口文件
import Vue from 'vue'
// 引入App组件 他是说要组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false
//创建vc麻烦写法
// const Demo = Vue.extend({})
// const d = new Demo()
// Vue.prototype.x = d
// 创建Vue实例对象 --vm
new Vue({
el:'#app',
// 完成了将App组件放入容器中
render: h => h(App),
//利用钩子函数挂载属性
beforeCreate(){
Vue.prototype.$bus = this //安装 全局事件总线 this指向vue原型
}
})
3.使用事件总线
在需要接收的组件School中
<template>
<div class="school">
<h2>学校名称:{{ name }}</h2>
<h2>学校地址:{{ address }}</h2>
</div>
</template>
<script>
export default {
name: "School",
props:['getSchoolName'],
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: skyblue;
padding: 5px;
}
</style>
.最好在beforeDestroy钩子中 用$off去解绑当前组件所用到的事件
4.在要传的组件Student中
<template>
<div class="student">
<h2>学生姓名:{{ name }}</h2>
<h2>学生性别:{{ sex }}</h2>
<button @click="sendStudentName">把Student组件的name传给School组件</button>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
name:"共产主义接班人",
sex:24,
};
},
methods:{
sendStudentName(){
//触发对应的自定义事件
this.$bus.$emit('hello',this.name)//绑定的事件名 不可重复
}
}
};
</script>
<style scoped>
.student{
background-color: rgb(131, 167, 228);
padding: 5px;
}
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/163345.html
