Vue Composition API：定义发射

Question

在定义自定义事件时， Vue 鼓励我们通过以下emits选项在组件上定义发出的事件：

app.component('custom-form', {
  emits: ['inFocus', 'submit']
})

使用 Vue 3 的组合 API，当一个独立的组合函数发出自定义事件时，是否可以在组合函数中定义这些？

Answer 1

我使用脚本设置语法这样做：

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

    const emit = defineEmits(['close'])

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

Answer 2

如果您正在使用，script setup则可以使用defineEmits编译器宏，而不必导入它：

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

emit('inFocus')
</script>

您还可以使用对象语法，它允许执行事件验证：

<script setup>
const emit = defineEmits({
  // No validation
  inFocus: null,

  // Validate submit event
  submit: ({ email, password }) => {
    if (email && password) return true
    else return false
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>

注意：submit无论验证如何，都会发出该事件，但如果验证未通过，您将收到 Vue 警告：

[Vue warn]：无效的事件参数：事件“提交”的事件验证失败。

现场观看

使用 TS 输入：

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

Answer 3

不，因为在setup钩子内部使用了组合函数，它无法访问其他选项，例如methods和emits：

export default defineComponent({
    name: "layout",
     emits: ['showsidebar']
    setup(props,{emit}) {
        const showSidebar = ref(true);
        const {
            breakpoints
        } = useBreakpoint();
        watch(breakpoints, (val) => {
            showSidebar.value = !(val.is === "xs" || val.is === "sm");
            emit('showsidebar',showSidebar.value )
        });
        return {
            showSidebar,
        };
    },
    data() {
        ...
    },

在上面的例子中，useBreakpoint只提供了一些组件可以使用它来表现的逻辑，如果有某种方法可以在组合函数中定义发射选项，这个函数将始终发射该事件，即使在组件内部使用该函数定义了发射的处理程序事件。

Answer 4

如果你想获得所有context：

    setup(props, context) {
       // console.log(context)
       context.emit("update:modelValue", data)
    },