Vue.protorype.x = {a:100,b:200}
这个x只是普通的对象里面没有$on和其他的,所以会报错
那么我们要整明白$on
、$off
、$emit
都在哪?
mounted() {
console.log('School',this.$on)
},
看看this
(VueComponent实例对象),为什么能调用
因为
$on
、$off
、$emit
都在Vue
原型对象上
验证:
main.js
console.log(Vue.prototype)
那把x的值设置成什么值它才能去找到Vue的原型对象,俩种写法:
-
Vue原型对象上的属性和方法都是给vm或者是给VueComponent实例对象用的
先是写一些
//创建一个组件 //这里的demo其实是VueComponent const Demo = Vue.extend({}) //之前是定义完组件后<demo />才能出现实例对象 //这里不行,所以我们直接在这new一个 const d = new Demo()//这个d是VueComponent的实例对象 Vue.prototype.x = d
在
School.vue
中写$on
、$off
、$emit
了School.vue
mounted() { console.log('School',this) this.x.$on('hello',(data)=>{ console.log('这里是School组件,收到了数据',data) }) },
在
Student.vue
里面写一按钮实现同等级组件间通信,把学生名交给School.vue
组件Student.vue
<template> <div> <h2>学生姓名:{{name}}</h2> <h2>学生性别:{{sex}}</h2> <button @click="sendStudentName">把学生名给School组件</button> </div> </template> <script> export default{ name: 'Student', components:{}, data() { return { name: '张三', sex: '男' } }, methods: { sendStudentName(){ this.x.$emit('hello',666)//$emit触发hello事件,先传个666 } }, } </script>
这里是School组件,收到了数据 666
简化一下main.js
里的x傀儡的代码
这个$on
、$off
、$emit
不仅VueComponent实例对象能调用的到,vm也可以
但是:
Vue.prototype.x = vm
const vm = new Vue({
render: h => h(App)
}).$mount("#app")
和
const vm = new Vue({
render: h => h(App)
}).$mount("#app")
Vue.prototype.x = vm
都不对,这时就要用到一个生命周期钩子beforeCreate()
那里面的this
是谁?Vue实例对象
在这里模板解析了吗?没有,甚至数据监测和数据代理都没有完成
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
beforeCreate() {
Vue.prototype.x = this//安装全局事件总线
},
render: h => h(App)
}).$mount("#app")
我们一般把x
定义成$bus
:总线、公共汽车,为什么加$
是为例迎合Vue的设计
为了避免名字上的冲突你可以src >创建config之类的>比如contans.js
还有一个可以解决名字冲突的问题:
你是在School.vue
组件里面用这个傀儡($bus
)绑定的hello
事件,为什么绑定这个事件?因为你想借用这个傀儡得到数据,希望各位在这个组件销毁之前最好把这个傀儡身上的这个hello
事件给它解绑。
所以我们一般会做这件事:
beforeDestroy() {
this.$bus.$off('hello')
},
Studnt.vue一旦没有了,整个VueComponent就没有了,但是傀儡不一样,School组件也许某一天没了,但是傀儡($bus
)一直在,所以该用的时候用,但是用完了一定要把傀儡上的那个事件给它解绑
但是傀儡($bus
)一直在,所以该用的时候用,但是用完了一定要把傀儡上的那个事件给它解绑
这就是全局事件总线。控制住$bus
想怎么传数据就怎么传数据
总结
全局事件总线(GlobalEventBus)
1.一种组件间通讯的方式,适用于任意组件间通讯
2.安装全局事件总线:
new Vue({
...
beforCreate(){
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
}
})
3.使用事件总线:
(1).接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
methods:{
demo(data){...}
}
......
mounted(){
this.$bus.$on('xxx',this.demo)
}
(2).提供数据:this.$bus.$emit('xxx',数据)
4.最好在beforeDestroy钩子中,用$off
去解绑当前组件所用到的
事件