怎么理解这个Bus呢,我把它分为3个部分。
个人理解为我在跟别人打电话,而手机就是这个中间通信枢纽,我就是组件A 接电话的人就是组件B
Bus作为中间枢纽为组件A传递数据到组件B,
那么应该怎么使用呢,个人归类为三部分
首先,引入一个Bus.js 组件,位置放哪都可以 只要能引入就完事
import Vue from 'vue'; //引入
// 使用 Event Bus
const bus = new Vue(); //定义
export default bus; //输出
然后就新建两个组件,这里就归为组件A 和组件B
接着就是把这个Bus引入到你需要互相传递的两个组件中,
组件A
<template>
<div>
<input v-model="GODV">
</div>
</template>
<script>
import bus from "../../../assets/js/bus.js"; //这里是根据你的文件位置所定的
export default {
data() {
return {
GODV: "123" //绑定了上面的输入框
}
},
methods: {},
destroyed(){ //这个钩子函数个人理解为离开页面后立刻执行下面的方法
bus.$emit("fover", this.GODV); //$emit 可以理解为 发送吧
}
</script>
组件B
<template>
<div>
<span>{{cpt}}</span>
</div>
</template>
<script>
import bus from '../../../assets/js/bus.js' //同样引入文件的位置
export default {
data () {
return {
cpt: ""
}
},
methods: {},
created() {
let _this = this
bus.$on('fover', (data) => { //$on 接收来自组件A $emit发出的数据
_this.name = data
console.log(data)
})
}
}
</script>
个人理解 记录一下 如有不足 望指出 谢谢