声明触发的事件
为了让组件的用法更清晰(作为文档),同时让 Vue 能区分事件与透传 attribute,推荐显式声明组件要触发的事件。根据组件是否使用 <script setup>
,声明方式有所不同。
使用 <script setup>
时:defineEmits()
宏
在 <script setup>
中,需通过 defineEmits()
宏声明事件。该宏无需导入,直接使用,返回一个与 $emit
作用相同的 emit
函数,供 <script>
中触发事件使用。
基础声明(数组形式)
<script setup>// 声明组件会触发 inFocus 和 submit 事件const emit = defineEmits(['inFocus', 'submit'])// 在脚本中通过 emit 函数触发事件function buttonClick() {emit('submit') // 触发 submit 事件,与模板中 $emit 效果一致}</script>
注意:defineEmits()
必须直接放在 <scrip