如何从 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

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

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

长×4