$emit和$on 的使用详细演示
一、$emit
触发当前实例上的事件,要传递的数据会传给监听器;
this $emit('自定义名',要传送的数据)
二、$on
监听当前实例上自定义事件;
VM.$on('事件名',callback) --------------------callback回调$emit要传送的数据;
三、$on 的使用
- 首先创建一个vue的空白实例(兄弟间的桥梁)
// busVue.js
import Vue from 'vue'
export default new Vue()
- 子组件 a
import Bus from "@/store/modules/busVue.js";
methods: {
handleSelect (item) {
Bus.$emit('changeSelect', item)
}
}
- 子组件 b
import Bus from "@/store/modules/busVue.js";
mounted(){
Bus.$on('changeSelect', (val)=>{
console.log(val, '7777777777')
})
},