vue3组件自定义事件

最新推荐文章于 2025-03-21 20:33:41 发布

原创最新推荐文章于 2025-03-21 20:33:41 发布 · 1.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

学习

9 篇文章

订阅专栏

本文详细介绍了Vue3中如何通过emits选项定义和监听自定义事件，展示了如何在组件间进行有效通信，包括事件触发机制和实例应用。

emits自定义事件

vue3中组件发送的自定义事件需要定义在emits选项中

emits.vue

<template>
	<div @click="$emit('my-click')"></div>
</template>
<script>
	export default {
	// 这里一定要注册，不然会触发两次，原生的点击事件也会触发
		emits: ['my-click']
	}
</script>

helloworld.vue

<template>
	<div>
		<emits @my-click="onclick"></emits>
	</div>
</template>
<script>
import emits form './emits.vue'
	export default {
		methods:{
			onclick(){
				console.log('自定义事件触发')
			}
		}
	}
</script>