说明:为了解决组件间的通信,也就是组件与组件间的数据传递(它们之间毫无关系);
这里以组件1传递数据到组件2为例
一、vue2中使用bus
1.首先新建一个Bus.js文件
import Vue from 'vue'
const Bus = new Vue()
export default Bus
2.在组件1中引用 传递数据
import Bus from './Bus'
export default {
data() {
return {
.........
}
},
methods: {
....
Bus.$emit('log', 120)
},
}
3.在组件2中引用 接收数据
import Bus from './Bus'
export default {
data() {
return {
.........
}
},
mounted () {
Bus.$on('log', content => {
console.log(content)
});
}
}
4.注意事项
(1)在传递数据的组件中使用Bus.$emit(),在接收数据的组件中使用Bus.$on()
(2)Bus.$emit()的第一个参数要与Bus.$on()的第一个参数一模一样(可以随意命名)
(3)Bus.$emit()的第二个参数是要传递的数据,如果要传递多个数据就以逗号隔开,相当于函数的实参一样
(4)Bus.$on()的第二个参数是箭头函数或者定义的方法,如果要接收多个数据就以逗号隔开,相当于函数的形参
(5)一定要在接收数据的组件页面关闭页面时销毁Bus(卸载生命周期里进行操作),具体如下
beforeDestroy () {
Bus.$off('updateData', this.getData);
};//this.getData是自己定义的方法,用来接收数据的
二、vue3中使用bus
1.安装插件
npm install --save mitt
2.在utils文件夹中新建mitt.js文件
import mitt from 'mitt'
const bus = mitt()
export default bus
3.在组件1中引用 传递数据
import bus from '@/utils/mitt'
onMounted(() => {
getList();
bus.emit("kanno",666)
});
4.在组件2中引用 接收数据
import bus from '@/utils/mitt'
onMounted(() => {
bus.on("kanno",(val)=>{
console.log("val",val);
})
});
5.注意事项
(1)在传递数据的组件中使用Bus.emit(),在接收数据的组件中使用Bus.on()
(2)Bus.emit()的第一个参数要与Bus.on()的第一个参数一模一样(可以随意命名)
(3)Bus.emit()的第二个参数是要传递的数据,如果要传递多个数据就以逗号隔开,相当于函数的实参一样
(4)Bus.on()的第二个参数是箭头函数或者定义的方法,如果要接收多个数据就以逗号隔开,相当于函数的形参
(5)一定要在接收数据的组件页面关闭页面时销毁Bus(卸载生命周期里进行操作),具体如下
onBeforeUnmount(()=>{
bus.off("kanno",fn)
})
// fn是用来接收参数的函数
三、说明
vue2和vue3中使用bus最大的区别在于vue2是通过创建新vue实例,而vue3是通过安装插件来使用,其他的使用过程大体一致,使用的方法也一致