前言
Vue中父组件向子组件传递参数时,可以通过prop;子组件向父组件传递参数时,通过$emit来传递。那么父组件下有多个子组件时怎么实现子组件间的数据传递呢?可以创建一个Vue实例作为第三方媒介实现数据的传递。
步骤一
// 在main.js文件中创建一个Vue实例 bus,然后将其挂载到Vue的原型对象中
const bus = new Vue()
Vue.prototype.$bus = bus
步骤二
然后我们就可以通过全局来使用啦,在其中的一个子组件中注册一个方法
methods: {
// 业务处理函数中注册一个方法,例如
lookDetails(data) {
this.$bus.$emit('passProductType', data)
}
}
步骤三
在另一个组件中使用就OK啦
mounted() {
this.$bus.$on('passProductType', (data) => {
console.log(data, '传递的数据')
})
},
// 用完别忘了销毁
beforeDestroy() {
this.$bus.$off('passProductType')
}