当前位置：首页 > news >正文

vue3 组合式API defineEmits() 与 emits 组件选项

news 来源：原创 2024/9/22 21:17:23

defineEmits() 和 emits组件选项在功能上都是用于声明组件可以向外触发的事件。它们的核心目的都是让组件明确地告知外界它能够发出哪些自定义事件，以此来规范组件间的通信。

defineEmits()在 Vue 3 的组合式 API 中使用。
emits组件选项在Vue 2 及 Vue 3 的选项式 API 中使用。

`defineEmits()`

defineEmits()用于声明由组件触发的自定义事件。

可以以两种形式声明触发的事件：

使用字符串数组的简易形式。
使用对象的完整形式。该对象的每个属性键是事件的名称，值是 null 或一个验证函数。
- 验证函数应返回布尔值，以表明事件参数是否通过了验证。

字符串数组语法：

<script setup>
const emit = defineEmits(['increment', 'decrement']);
</script>

defineEmits接收一个字符串数组['increment', 'decrement']，这意味着在该组件内部可以通过emit('increment')和emit('decrement')来触发increment和decrement这两个事件。

对象语法：

<script setup>
const emit = defineEmits({updateCount: (newCount) => {return typeof newCount === 'number';}
});
</script>

defineEmits接收一个对象，对象的键updateCount是事件名称，值是一个验证函数(newCount) => { return typeof newCount === 'number'; }。当在组件内部调用emit('updateCount', value)时，这个验证函数会检查传递的value是否为数字类型，如果不是，Vue 会在开发环境下给出警告。

defineEmits函数的返回值是一个函数，通常命名为emit。emit可以在子组件中触发自定义事件。当子组件需要向父组件传递数据或通知父组件发生了某些事情时，可以使用emit函数触发相应的自定义事件。

示例

子组件ChildComponent.vue：

<!-- ChildComponent.vue -->
<template><h2>ChildComponent的标题</h2><div>ChildComponent的内容</div><div>count: {{ count }}</div><div>在ChildComponent中展示customValue的值：{{ attrs.customValue }}</div><button @click="changeCount">修改count 并 赋值给 父组件的 customValue</button>
</template>
<script setup lang="ts">
import { ref, useAttrs } from 'vue';
let attrs = useAttrs();
let count = ref(1);const emit = defineEmits({updateCustomValue: count => {return typeof count.value == 'number';}
});const changeCount = () => {count.value++emit('updateCustomValue', count.value);
};
</script>

在父组件中使用ChildComponent.vue：

<template><div class="home-wrap"><h1>父组件</h1><ChildComponentclass="child-div":customValue="customValue"@updateCustomValue="updateCustomValue"/></div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const customValue = ref(10);
const updateCustomValue = ($event: number) => {console.log($event);customValue.value = $event;
};
</script>

如果将子组件的count 属性声明为字符串count = ref('hello world')，点击按钮，调用emit('updateCustomValue', count.value);，字符串hello world 会被赋值给 customValue。

浏览器控制台报错：

Invalid event arguments: event validation failed for event “updateCustomValue”.

无效的事件参数:事件"updateCustomValue"验证失败。

`emits`组件选项

emits用于声明由组件触发的自定义事件。

可以以两种形式声明触发的事件：

使用字符串数组的简易形式。
使用对象的完整形式。该对象的每个属性键是事件的名称，值是 null 或一个验证函数。
- 验证函数会接收到传递给组件的 $emit 调用的额外参数。例如，如果 this.$emit('foo', 1) 被调用，foo 相应的验证函数将接受参数 1。
- 验证函数应返回布尔值，以表明事件参数是否通过了验证。

字符串数组语法：

export default {emits: ['customEvent1', 'customEvent2']
};

emits是一个组件选项，它是一个字符串数组，其中customEvent1和customEvent2是这个组件可以触发的两个自定义事件。在组件的方法中，可以通过this.$emit('customEvent1', data)来触发customEvent1事件，并传递相关数据data。

对象语法：

export default {emits: {customEvent: (payload) => {// 验证逻辑，例如检查 payload 的类型或值return payload > 0;}}
};

emits是一个对象，customEvent是事件名称，其对应的值是一个验证函数。当在组件内部通过this.$emit('customEvent', value)触发事件时，这个验证函数会检查传递的value是否符合条件（这里是value > 0）。如果不符合，Vue 会在开发环境下发出警告。