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

Posted 2023-02-22

【中文标题】如何在 vue3 中的“setup”方法中“发出”事件？

【英文标题】：How to `emit` event out of `setup` method in vue3?

【发布时间】：2021-04-15 13:16:26

【问题描述】：

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

【参考方案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);
 

查看更多信息：https://github.com/Carlos-Alexandre-Leutz/emitir-eventos-filho-pra-pai-com-dados-no-vue3

【参考方案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