如何在 vue3 中的“setup”方法中“发出”事件？答案

【问题标题】：How to `emit` event out of `setup` method in vue3?如何在 vue3 中的“setup”方法中“发出”事件？
【发布时间】：2021-04-15 13:16:26
【问题描述】：

我知道我可以从setup 方法调用emit 方法，但是有没有办法从任何其他函数发出事件而不从setup 方法传递emit 方法（不是@ 中的函数987654324@ 选项，但 useXXX 函数）？

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

您可以使用 Vue 中的 getCurrentInstance。你可以在the docs查看。

用法就像

function useFunctionThatEmitsSomething(){
  const instance = getCurrentInstance();

  // do something
  instance.emit('event');
}

编辑：尽管此答案解决了作者的问题，但根据链接的文档，此方法仅适用于 ADVANCED 用例，例如 em> 创作插件或库。对于常见的用例，比如构建一个简单的 SPA，使用它是完全不鼓励，应该不惜一切代价避免使用它，因为它可能导致不可读和不可维护的代码。如果您觉得有必要在这种情况下使用它，那么您可能做错了什么。

【讨论】：

来自the linked docs：“强烈建议不要在应用程序代码中使用getCurrentInstance。不要不将其用作逃生舱口，以获取相当于this in组合 API。”
我知道...但是问题的作者特别问这个...
是的，我认为让未来的读者看到您省略的警告信息会有所帮助。如果您愿意，我可以将其编辑到答案中，但无论哪种方式，我认为让警告可见会更负责任。就我自己而言，我通过搜索找到了这个问题，并且没有与提问者相同的限制，所以我有点惊讶你接受/固定的答案推荐了文档如此强烈反对的东西。
编辑了答案。现在我觉得已经够清楚了

【解决方案2】：

这是在 vue3 中以编程方式（使用 javascript）发出事件的正确方法：

export default defineComponent({
  // See: https://v3.vuejs.org/guide/migration/emits-option.html#overview
  emits: 'myEventName', // <--- don't forget to declare custom events emitted
  setup(_, { emit }) {

    emit('myEventName') // <--- emit custom event programmatically whenever we want

  },
})

emits 函数可以作为参数轻松传递给任何未在 setup 中声明的函数。

关于其他答案的旁注：当有更好的选择时，我们应该避免使用 getCurrentInstance()，它是为需要访问 vue 组件内部的库作者（又名 vue v2 的 this）而设计的。尤其是当这些替代方案是为我们的用例明确设计时。

【讨论】：

为什么需要声明 emits: 'specialClick'？
嗨 @RomkaLTU emits 就像 props 现在在 Vue 3 中：v3.vuejs.org/guide/migration/emits-option.html#_3-x-behavior

【解决方案3】：

setup 函数有两个参数，第一个是props。第二个是context，它公开了三个组件属性，attrs、slots 和emit。

您可以从上下文中访问发射，例如：

export default {
    setup(props, context) {
        context.emit('event');
    },
};

或

export default {
    setup(props, { emit }) {
        emit('event');
    },
};

Source

【讨论】：

这是要走的路。

【解决方案4】：

methods: {  
 minhaFuncao(){ 
    let data = "conteudo";
    this.$emit("nomeDoMEuEvento", data);
 }
}

【讨论】：

【解决方案5】：

在 vue3 打字稿设置中

<script setup lang="ts">
const emit = defineEmits()
emit('type', 'data')
<script>

【讨论】：

【解决方案6】：

使用 Vue 3 设置语法糖

<script setup lang="ts">
import { defineEmits } from 'vue'

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

function yourFunction (id: number) {
  emit('change', id)
}
<script>

请参阅文档：https://v3.vuejs.org/api/sfc-script-setup.html#typescript-only-features

【讨论】：