javascript - 如何使用 <script setup> 语法在 Vue3 中从子级向父级发出事件？

Question

我有以下组件:

<SomeModal :is-modal-active="isAddingThing" @close="isAddingThing = false" />

该组件内部如下所示:

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
    isModalActive: Boolean,
})

const handleClose = () => {
    emit('close') // doesn't work
}
</script>

<template>
<V-Modal @close="handleClose">
    ...
</V-Modal>
</template>

我如何向 parent 发出？

Answer 1

使用 Vue 版本 3.2，如果您想从内部发出事件 <script setup> ，那么你所要做的就是用 defineEmits() 定义你的发射。 <script setup> 内自动可用的方法(您不必导入它)，然后您可以通过调用 emit('myEventName', myParams) 来发出事件.这是一些示例代码...

<script setup>
const emit = defineEmits(['eventA', 'eventB'])
function btnClick(params) {
    emit('eventA')
    emit('eventB', params)
}
</script>