vue 兄弟组件之间的传值

最新推荐文章于 2023-12-05 09:43:32 发布

mylbest

最新推荐文章于 2023-12-05 09:43:32 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 组件传值文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/mylbest/article/details/126164383

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

组件传值

1 篇文章

订阅专栏

这篇博客介绍了如何在Vue应用中创建并使用Event Bus进行组件间的通信。通过在main.js中全局注册一个Vue实例，然后在组件中分别使用$emit和$on方法实现数据传递。示例中展示了在one.vue组件中触发搜索事件，并在two.vue组件中监听并接收该事件的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建bus.js文件，我放在了util文件夹下。bus.js也可以全局挂载,在main.js文件中处理。

放在main.js里是Vue.prototype.$bus = new Vue()

bus.js

import Vue from "vue";
export default new Vue;

one.vue 传值组件

export default {
	data() {},
	
	mounted() {},
	
	methods: {
		// 标签上绑定的处理事件
		handlerSearch() {
			let obj = { title: "标题", page: 1 };
			bus.$emit("search", obj);
		}
	}
}

two.vue

export default {
	data() {},
	
	mounted() {
		// 在组件实例创建时不会调用此代码段
		bus.$on("search", (val) => {
			console.log('val:', val);
    	});
	},
	
	methods: {}
}