Vue Composition API：定义发射

Question

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

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

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

原文由 PeterB 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您正在使用 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 警告]：无效的事件参数：事件“提交”的事件验证失败。

现场观看

---

使用 TS 打字：

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

原文由 Roland 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不，因为在 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 仅提供组件可以使用的一些逻辑。如果有办法在组合函数中定义 emits 选项，那么该函数将始终发出事件，即使该函数仅在定义发出事件的处理程序的组件内部使用。

使用新的脚本设置语法，您可以执行以下操作：

 <script setup>
 import { defineEmits,watch,ref } from 'vue'

    const emit = defineEmits(['showsidebar'])
    const showSidebar = ref(true);
    const { breakpoints } = useBreakpoint();
    watch(breakpoints, (val) => {
            showSidebar.value = !(val.is === "xs" || val.is === "sm");
            emit('showsidebar',showSidebar.value);
        });
</script>

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议