vue.js - 如何从 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>