首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue自定义事件与组件传值

vue自定义事件与组件传值指南

2026-07-11 10:11:33 作者：bulibuluo

想掌握Vue组件通信？本文用最直白的语言拆解自定义事件三步法,从声明触发到父子兄弟传值,配合EventBus实战案例,让你3分钟搞定跨组件数据传递,核心关键词：组件通信、自定义事件、Vue传值

自定义事件应该分为三步

1、声明自定义事件

2、监听自定义事件

3、触发自定义事件

在vue中，声明和监听自定义事件被合为一个步骤，即使用$on(eventName,callback)同时声明和监听；

触发事件则使用$emit(eventName[,...arg])，...arg是传递给监听回调callback的参数列表

组件传值分为三种：父子、子父以及兄弟

父子传值

父子传值较为容易，只需在父组件内为子组件标签添加属性，然后在子组件内通过props属性接收即可

Vue.component("Parent",{
	template: "<div className='parent'><child data='这是传递给子组件的信息' /></div>",
	components: {
		Child
	}
})
Vue.component("Child",{
	template: "<div className='child'>{{data}}</div>",
	props: ["data"]
})

//渲染Parent组件的HTML结果为 
//<div class="parent">
//	<div class="child">
//		这是传递给子组件的值
//	</div>
//</div>
//注意，接收的属性命名必须和父组件传递过来的属性同名

子父传值

利用自定义事件来传值，在父组件内使用$on声明和监听自定义事件，在子组件内触发事件并传值

Vue.component("Parent",{
	template: "<div className='parent'><child @myEvent='myEventHandler' /></div>",
	components: {
		Child
	},
	methods: {
		myEventHandler: function (data) {
			console.log(data)
		}
	}
})
Vue.component("Child",{
	template: "<div className='child'></div>",
	mounted: {
		this.$emit("myEvent","这是传递给父组件的数据")
	}
})
//渲染Parent，控制台会弹出：这是传递给父组件的数据

兄弟传值

利用eventBus实现，所谓eventBus，其实就是一个Vue实例对象，我们为这个对象添加自定义事件并在需要的时候触发这个实例上的自定义事件

var eventBus = new Vue()

Vue.component("Parent",{
	template: "<div className='parent'><child1 /><child2 /></div>",
	components: {
		Child1,
		Child2
	},
	methods: {
		myEventHandler: function (data) {
			console.log(data)
		}
	}
})
Vue.component("Child1",{
	template: "<div className='child1'>child1</div>",
	mounted: {
		eventBus.$on("brotherEvent",(data) => {
			//注意this绑定的上下文对象，这里使用了箭头函数
			cosnole.log(data);
		})
	}
})
Vue.component("Child2",{
	template: "<div className='child1'>child2</div>",
	mounted: {
		eventBus.$emit("myEvent","这是 Child2 传递给Child1 的数据")
	}
})

//渲染Parent，控制台会弹出：这是 Child2 传递给Child1 的数据

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。