Vue 应用程序中有一些（但不是每个）emit 函数有效

Question

我有一个发出函数的组件。 emit 事件在一个函数中起作用，但不会在下一个函数中触发。第二个函数 handleEmit 如下所示。其中两个函数不会触发，但一个会触发。在第一个功能中，他们开火。这些 emit 函数只触发一次是有原因的吗？ emit 函数只触发一次吗？

我一直无法得到一个代码笔来反映这个问题。如果有一个你知道我可以分叉的代码笔，那可能对我有帮助吗？我在这上面花了几个小时。

Parent.vue

<template> 
  <q-dialog v-model="showModal">
     <q-card class="add-modal">
       <Component
         @test="getTest"
         @fireFunction="fireFunction"
         @close="closeModal"
   
        ></Component
     ></q-card>
  </q-dialog>
</template>
<script>
  import Component from "../components/Component.vue";

 export default {
  name: "Parent",
  components: { Component },
  setup(props, context) {

  const fireFunction = async () => {
   //get data from database;
  };

  const closeModal = async () => {
     showModal.value = false;
  
  };

   const getTest = () => {
      console.log("ran");
  };

  return {
     fireFunction,
     closeModal,
     getTest,
  };
 },
};
 </script>

Component.vue

<template>
  <q-dialog v-model="dialog">
      <q-card>
         <q-btn
            @click="handleEmit"
            label="Close"
         </q-card>
      </q-dialog>
  </template>
  <script>
    export default {
    name: "Component",
    emits: ["fireFunction", "close", "test"],
  setup(props, { emit }) {
  
  onMounted(async () => {
      emit("fireFunction"); //works here, but not below
      emit("test"); //works here, but not below
  
   })
  const handleEmit = async () => {
    //handle database action

      emit("fireFunction"); //does not work
      emit("test"); //does not work
      emit("close"); //works

     };

return {
  handleEmit,
  
 };
 },
};