VueCompositionAPI：定义发射

html5 • 2022年11月9日 am12:24 • 问答

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

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

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

回答

不，因为在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只提供了一些组件可以使用它来表现的逻辑，如果有某种方法可以在组合函数中定义发射选项，这个函数将始终发射该事件，即使在组件内部使用该函数定义了发射的处理程序事件。

以上是VueCompositionAPI：定义发射的全部内容。

THE END

二维码