网站建设综合实训pptseo项目
全局事件总线(GlobalEventBus)
一种可以在任意组件通信的方式,本质上就是一个对象,它必须满足以下条件
- 所有的组件对象都必须能看见他
- 这个对象必须能够使用$ on $ emit $ off方法取绑定、触发和解绑事件
使用步骤
- 定义全局事件总线
//创建VUE
new Vue({el:'#app',render:h=> h(App),beforeCreate(){Vue.prototype.$bus=this //安装全局事件总线},})
- 使用事件总线
a.接收数据:A组件想接收数据,则在A组件中给$bus 绑定自定义事件,事件的回调留在A组件自身
export default{methods(){demo(data){...}}...mounted(){this.$bus.$on('xxx',this.demo)}
}
b.提供数据:this.$bus.$emit(''xxx,data)
3. 最好在beforeDestroy钩子中,用**$off()**去解绑当前组件所用到的事件。
src/main.js
//引入vue
import Vue from 'vue'
//引入APP.vue
import App from './App.vue'//关闭Vue的生产提示
Vue.config.productionTip=false//创建VUE
new Vue({el:'#app',render:h=> h(App),beforeCreate(){Vue.prototype.$bus=this //安装全局事件总线},})
src/App.vue
<template><div class="app"><h1>{{msg}}</h1><School></School><Student></Student></div>
</template><script>import Student from './components/Student'import School from './components/School'export default {name:'App',components:{School,Student},data() {return {msg:'你好啊!'}}}
</script><style scoped>.app{background-color: gray;padding: 5px;}
</style>
src/compoents/School.vue
<template><div class="school"><h2>学校名称:{{name}}</h2><h2>学校地址:{{address}}</h2></div>
</template><script>export default {name:'School',data() {return {name:'尚硅谷',address:'北京',}},mounted() {// console.log('School',this)this.$bus.$on('hello',(data)=>{console.log('我是School组件,收到了数据',data)})},beforeDestroy() {this.$bus.$off('hello')},}
</script><style scoped>.school{background-color: skyblue;padding: 5px;}
</style>
src/compoents/Student.vue
<template><div class="student"><h2>学生姓名:{{name}}</h2><h2>学生性别:{{sex}}</h2><button @click="sendStudentName">把学生名给School组件</button></div>
</template><script>export default {name:'Student',data() {return {name:'张三',sex:'男'}},mounted() {// console.log('Student',this.x)},methods: {sendStudentName(){this.$bus.$emit('hello',this.name)}},}
</script><style scoped>.student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>