Vue 3 的 emit 简单使用

在 Vue 3 中使用 emit，子组件可以将事件通知父组件，父组件可以在响应这些事件时执行特定的逻辑。

emit 是一种非常灵活的通信方式，允许组件之间以解耦的方式进行交互。

1. 基本用法

1、使用 defineEmits

子组件

<template><div style="border: 1px solid orange"><p>Child</p><button @click="handleClick" style="border: none;">Click Me</button></div>
</template><script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['update']) // 定义事件
const handleClick = () => {emit('update', 'newValue') // 触发 'update' 事件，并传递参数
}
</script>

父组件

<template><div style="border: 1px solid red"><p>Father</p><Child @update="handleUpdate" /></div>
</template><script setup>
import Child from './Child.vue'const handleUpdate = (value) => {console.log('Received from child:', value)
}
</script>

2、在模板中直接使用 emit 

子组件

<template><div style="border: 1px solid orange"><p>Child</p><button @click="$emit('update', 'newValue')" style="border: none;">Click Me</button></div>
</template>

父组件不变 

3、在 JSX/TSX 中使用 emit 

子组件

import { defineComponent } from 'vue';export default defineComponent({setup(_, { emit }) {const handleClick = () => {emit('update', 'newValue');};return () => (<div style="border: 1px solid orange"><p>Child</p><button style="border: none;" onClick={handleClick}>Click Me</button></div>);}
});

父组件

import { defineComponent } from 'vue';
import Child from './Child';const Father = defineComponent({setup() {const handleUpdate = (value) => {console.log('Received from child:', value)}return () => (<div style="border: 1px solid red"><p>Father</p><Child onUpdate={handleUpdate} /></div>);},
});export default Father;

2. 举例 🌰

子组件

import { defineComponent } from 'vue';const Child = defineComponent({props: ['label', 'message'],emits: {'update': (value: string) => typeof value === 'string','click': null,},setup(props, { emit }) {const emitEvent = () => {emit('update', 'Hello from Child!');emit('click');};return () =><div style={{ border: '1px solid pink' }}><h3>Child Component Content</h3><button onClick={emitEvent} style={{ border: 'none' }}>{props.label}</button><div>props.message：{props.message}</div></div>},
});export default Child;

父组件

import { defineComponent, ref } from 'vue';
import Child from './Child';const Father = defineComponent({setup() {const date = ref('2024-08-21');const handleUpdate = (target: string) => {console.log('Update event received:', target);};const handleClick = () => {console.log('Click event received');};return () => (<div><Child label="Click Me" message={date.value} onUpdate={handleUpdate} onClick={handleClick} /></div>);},
});export default Father;

父组件向子组件传递数据，子组件使用 prop 接收，进而展示到页面。

子组件向父组件抛出事件 emit，并且可以传递参数，父组件使用 onXXX 来监听子组件触发的事件。比如 onUpdate 和 onClick 事件。

3. 注意事项

1、事件名称区分大小写

Vue 3 中的事件名称是区分大小写的。这意味着 @update 和 @Update 是两个不同的事件名称。在子组件和父组件中，确保事件名称的一致性非常重要。

2、事件参数传递

使用 emit 可以传递多个参数，这些参数将在父组件中对应的事件处理函数中接收到，并且需要按照顺序正确接收它们。

// 子组件
emit('update', 'value1', 'value2');// 父组件
<Child @update="handleUpdate" /><script setup>
const handleUpdate = (param1, param2) => {console.log(param1, param2); // param1 = 'value1', param2 = 'value2'
};
</script>

3、事件参数类型

在使用 TypeScript 时，defineEmits 可以定义事件和参数的类型。不仅可以提高代码的安全性，还能在开发过程中获得更好的类型提示。

const emit = defineEmits<{ (event: 'update', value: string): void }>();emit('update', 'newValue'); // 正确
emit('update', 123); // 错误，类型不匹配

4、确保事件已声明

通过 defineEmits 定义子组件中的事件时，要确保所有可能触发的事件都已声明。未声明的事件将无法通过 emit 触发。

const emit = defineEmits(['update', 'delete']);emit('update', 'newValue'); // 正确
emit('delete'); // 正确
emit('add'); // 错误，未声明 'add' 事件

5、避免滥用事件

在设计组件时，尽量减少事件的种类和数量，尤其是在组件树较为复杂时。过多的事件可能导致代码难以维护和调试。