Vue 兄弟组件间传值应用

Posted 2021-08-11 web半晨

目录

• • 1、eventBus 方式

---

1、eventBus 方式

第一步

创建 eventBus.js 文件，此文件可以放在 src 文件夹下的任何位置。我这里放在 utils 文件夹下。eventBus.js 也可以全局挂载，也就是在 main.js 文件中处理，我这里按需引入。

// "vue" 不能写成 "Vue"
// 会找不到
import Vue from "vue";
export default new Vue;

第二步

创建两个子组件，分别是 one.vue 和 two.vue。

one.vue 传值组件

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

two.vue 接收组件

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

eventBus 方式结束。