如何在 vue3 中从 `setup` 方法中`emit` 事件？

Question

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

Answer 1

在 vue3 打字稿设置中

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

• 20220626

<script setup lang="ts">
const emit = defineEmits(['emit_a', 'emit_b'])
emit('emit_a')
emit('emit_b', 'emit_b_data')
<script>

Answer 2

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

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

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

或者

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

来源

Answer 3

使用 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

Answer 4

以下是在 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 组件（又名thisvue v2）内部的库作者设计的，当有更好的替代方案时。特别是当这些替代方案是为我们的用例明确设计的时。

Answer 5

您可以getCurrentInstance从 Vue 使用。您可以在文档中查看它。

用法就像

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

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

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