数据总线bus实现兄弟组件之间的通信

最新推荐文章于 2022-11-24 11:56:23 发布

Python User

最新推荐文章于 2022-11-24 11:56:23 发布

阅读量464

点赞数

分类专栏： Vue基础部分文章标签： vue

本文链接：https://blog.csdn.net/weixin_44684357/article/details/124205621

版权

Vue基础部分专栏收录该内容

33 篇文章 2 订阅

订阅专栏

本文介绍了如何使用Vue.js创建一个bus.js模块，通过$emit和$on方法实现在Abro和Bbro组件之间的数据传递。通过实例展示了如何在组件间传递参数，并在组件挂载和销毁时进行事件监听和解绑，以避免内存泄漏。

摘要由CSDN通过智能技术生成

定义一个数据总线bus.js，Abro组件给Bbro组件传值

bus.js

import Vue from 'vue'

const busData = new Vue();

export default busData

Abro.vue

import busData from './bus'
export default {
	data(){return { title:'this is title!' } }
	methods:{
		onClick(){ // 定义一个点击事件进行传值
			// 每一个vue实例 他都会有一个$emit方法，同时他也会有负责监听的一个$on方法
			busData.$emit('addItem', this.title)
		}
	}
}

Bbro.vue

import busData from './bus'
export default {
	data(){return { title:'this is title!' } }
	mounted(){
		// 在vue组件进行挂在的时候，去监听Abro.vue中定义的addItem方法
		// 这个事件一旦触发的话，我们就去执行一个isComing的方法函数
		busData.$on('addItem', this.isComging)
	},
	methods:{
		isComging(title){ // title是Abro.vue传递过来的参数
			console.log('title是Abro传过来的值')
		}
	},
	beforeDestroy(){
		// 组件挂在的时候进行监听，在组件销毁的时候进行一个解绑，这样就不会造成潜在内存泄漏的问题。
		busData.$off('addItem', this.isComging)
	}
}