vue3中emits

在 Vue 3 中，emits 是一个组件选项，用于声明组件可以触发的自定义事件。这有助于组件间的通信，特别是子组件向父组件传递数据。

以下是 emits 的基本用法和示例：

1. 声明自定义事件

你可以在组件中使用 emits 选项来声明可以触发的事件。

数组形式–数组形式适用于不需要进行参数验证的场景：

export default {emits: ['customEvent1', 'customEvent2'],methods: {triggerEvent1() {this.$emit('customEvent1', 'Event 1 triggered');},triggerEvent2() {this.$emit('customEvent2', 'Event 2 triggered');}}
};

对象形式–对象形式允许你对事件进行更详细的验证：

export default {emits: {customEvent: (payload) => {return typeof payload === 'string';}},methods: {triggerEvent() {this.$emit('customEvent', 'Valid payload');}}
};

2. 触发事件

在子组件中，使用 this.$emit 方法触发声明的事件：

<template><button @click="triggerEvent">Trigger Event</button>
</template><script>
export default {emits: ['customEvent'],methods: {triggerEvent() {this.$emit('customEvent', 'Event triggered');}}
};
</script>

父组件监听事件在父组件中，使用 v-on 或 @ 指令监听子组件的事件：

<template><child-component @customEvent="handleEvent" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleEvent(message) {console.log(message); // 输出: 'Event triggered'}}
};
</script>

4. 使用 defineEmits（组合式 API）

在组合式 API 中，可以使用 defineEmits 函数来定义事件：

<template><button @click="triggerEvent">Trigger Event</button>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits(['customEvent']);
// 数组形式
const emitOther = defineEmits(['increment', 'decrement']);// 对象形式
const emit = defineEmits({updateCount: (newCount) => {return typeof newCount === 'number';}
});
const triggerEvent = () => {emit('customEvent', 'Event triggered');
};
</script>

对象形式进行一次完整的表达

<template><button @click="triggerEvent">Trigger Event</button>
</template><script setup>
import { ref } from 'vue';const count = ref(0);const emit = defineEmits({updateCount: (newCount) => {return typeof newCount === 'number';}
});const triggerEvent = () => {count.value++;emit('updateCount', count.value);
};
</script>

TS的写法在 TypeScript 中，你可以使用类型声明来定义事件参数的类型：

<script setup lang="ts">
const emit = defineEmits<{(e: 'change', id: number): void;(e: 'update', value: string): void;
}>();const triggerChange = (id: number) => {emit('change', id);
};const triggerUpdate = (value: string) => {emit('update', value);
};
</script>