如何从 vue3 中的 setup 方法中发出事件？

Question

我知道我可以从 setup 方法调用 emit 方法，但是有什么方法可以在不从设置方法传递 emit 方法的情况下从任何其他函数发出事件（不是 methods 选项中的函数，而是 useXXX 函数） ?

Answer 1

您可以使用 Vue 中的 getCurrentInstance。您可以在 the docs.

中查看

用法就像

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

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

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

Answer 2

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

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

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

  },
})

emits 函数可以像参数一样轻松地传递给任何未在安装程序中声明的函数。

关于其他答案的旁注：我们应该避免使用 getCurrentInstance()，这是为需要访问 vue 组件内部结构的库作者准备的（a.k.a。this vue v2 )，当有更好的选择时。特别是当这些替代方案是专门为我们的用例设计的时。

Answer 3

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

您可以从以下上下文访问发射：

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

或

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

Source

Answer 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

Answer 5

在 vue3 打字稿设置中

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

Answer 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

如何从 vue3 中的 setup 方法中发出事件？

How to `emit` event out of `setup` method in vue3?

vue.js

vuejs3