Emits

---

Vue3 中组件派发的自定义事件需要定义在 emits 选项中：

注意

• 原生事件会触发两次，比如 click
• 尽量避免使用原生事件

---

• 类型： Array<string> | Object

• 示例：

<!-- EmitsComp.vue -->
<template>
	<!-- 不建议用原生事件 -->
	<div @click="$emit('click')">
		<h3>这是一个自定义事件</h3>
	</div>

	<!-- 推荐这种写法 -->
	<div @click="$emit('custom-emits', data)">
		<h3>这是一个自定义事件</h3>
	</div>
</template>

<script>
	import { reactive } from 'vue'
	export default {
		// 数组语法
		// 如果不设置 emits: ['click']，事件会执行两次
		emits: ['click'],
		// 推荐这种写法
		emits: ['custom-emits'],

		// 对象语法
		emits: {
			// 没有验证函数
			'custom-emits': null,

			// 带有验证函数
			'custom-emits': payload => {
				if (payload.phone && payload.password) {
					return true
				} else {
					console.warn(`Invalid event payload!`)
					return false
				}
			},
		},

		setup() {
			const data = reactive({
				phone: '158xxxxxxxx',
				password: '123456',
			})

			return { data }
		},
	}
</script>

<!-- Layout.vue -->
<template>
	<emits-comp @custom-emits="handleClick" />
</template>

<script>
	import EmitsComp from './EmitsComp.vue'
	export default {
		components: {
			EmitsComp,
		},
		setup() {
			function handleClick(payload) {
				console.log(`执行了emit自定义事件！, 参数为 ${JSON.stringify(payload)}`)
			}

			return { handleClick }
		},
	}
</script>