Vue.js Vue Composition API： Defining emits

发布于01月22日

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

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

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

推荐答案

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