如何从 Vue Composable 触发 $emit 事件

Question

我有一个需要触发事件的 vue 可组合项。我天真地设置如下：

*// composable.js*
import { defineEmits } from "vue";

export default function useComposable() {
  // Vars
  let buffer = [];
  let lastKeyTime = Date.now();
  const emit = defineEmits(["updateState"]);

document.addEventListener("keydown", (e) => {
    // code
    emit("updateState", data);
   }

// *App.vue*
<template>
<uses-composables
    v-show="wirtleState.newGame"
    @updateState="initVars"
  ></uses-composables>
</template>
<script setup>
const initVars = (data) => {
//code here

}

// usesComposable.vue
<template>
  <button @click="resetBoard" class="reset-button">Play Again</button>
</template>

<script setup>
import { defineEmits } from "vue";
import useEasterEgg from "@/components/modules/wirdle_helpers/useEasterEgg.js";


useEasterEgg();
</script>

我得到的错误是“Uncaught TypeError：emit is not a function useEasterEgg.js:30:11

很明显你不能在.js 文件中使用defineEmits。我在 Vue 文档中没有看到他们专门使用此场景的任何地方。除了使用 $emits 之外，我没有看到任何其他方法可以做到这一点，但这是在我的可组合项没有的模板中调用的。非常感谢任何启发。

Answer 1

您可以从可组合项发出事件，但需要使用

context

知道应该从哪里触发事件，可以从传递给设置函数的第二个 prop 访问该事件：https://vuejs.org/api /composition-api-setup.html#setup-context

可组合：

    export default function useComposable(context) {
      context.emit("some-event")
    }

组件脚本：

    <script>
    import useComposable from "./useComposable"
    export default {
       emits: ["some-event"],
       setup(props, context) {
           useComposable(context)   
       }
    }
    </script>

Answer 2

要在脚本设置中使用它，我发现最好的方法是首先声明 DefineEmit，然后将其分配给 const，然后将其作为参数传递给可组合项：

const emit = defineEmit(['example']
useMyComposable(emit);

function useMyComposable(emit){
   emit('example')
}

Answer 3

您无法以这种方式访问发射，正如文档所说：defineProps和defineEmits是仅在脚本设置内可用的编译器宏。 https://vuejs.org/api/sfc-script-setup.html

我不完全确定你想要实现什么，但你可以使用 vue-use 可组合库来听击键https://vueuse.org/core/onkeyrinkle/

Lx4

Answer 4

我在此链接中找到了 3 种发射方法的全面概述：https://weekly-vue.news/issues/105 这些方法是：

1. 从组件发出 - 而不是从可组合项发出。
2. 将emit作为参数传递
3. 使用 getCurrentInstance

文档中不鼓励使用方法 3。

方法 1 可读性最强、最简单，但对于我的目的来说太长了。

我使用了方法 2，以便我的组件清楚地表明它发出哪个事件：

// in the component: 

const emit = defineEmits(['delete']);
const { openConfirmDelete } = useConfirmDelete(emit);

// in the composable:

type Emit = (event: 'delete', ...args: any[]) => void;

export function useConfirmDelete(emit: Emit) {
// function body
emit('delete', args);
// etc.
}