vue.js - Vue 组合 API : Defining emits

Question

当defining custom events Vue 鼓励我们通过 emits 在组件上定义发出的事件。选项:

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

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

Answer 1

不，因为 setup 内部使用了合成函数。无法访问其他选项的钩子(Hook)，例如 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>