Vue Composition API：定义发射答案

【问题标题】：Vue Composition API: Defining emitsVue Composition API：定义发射
【发布时间】：2021-04-26 21:02:25
【问题描述】：

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

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

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

【问题讨论】：

标签： vue.js vuejs3 vue-composition-api

【解决方案1】：

如果你想得到所有的context

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

【讨论】：

【解决方案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 选项，那么即使在定义发出事件处理程序的组件内部使用了该函数，该函数也将始终发出该事件。

【讨论】：

感谢您的明确解释。我使用 Composition API 在只有 <template></template> 部分更改的组件之间共享代码，因此每次都必须定义发射和道具是令人沮丧的。这个用例有更好的方法吗？
不客气，有两种选择可以使用 mixins 或扩展
我推荐使用mixins，你可以查看example

【解决方案3】：

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

<script setup>
    import { defineEmit } from 'vue'
    
    const emit = defineEmit(['close'])
    
    const handleClose = () => {
        emit('close')
    }
</script>

【讨论】：

由于 Vite，到目前为止，这不适用于 Nuxt3(vue3)。 __vite_ssr_import_2__.defineEmit is not a function