VUE 3事件/听众无法正确交流

Question

我正在构建VUE应用程序（带有Naive-UI）来记录我的体育投注。我已经创建了一个具有赌注网格的组件，并且我正在尝试创建一种模式，该模态将使我能够创建新的投注。模态将第一次正确打开。但是，当我第二次尝试打开它时，它不会打开。这是因为“ ShowBetModal”仍将“ showbetmodal”设置为true。事件为什么不触发？我已经删除了数据表的内容，以使摘要可管理。

BETS.VUE

<template>
  <div>
    <n-card title="Bets" header id="bets-table-card">
      <template #header-extra>
        <n-icon class="pointer" @click="showBetModal = true">
          <add-circle-outline></add-circle-outline>
        </n-icon>
      </template>
    <bet-modal :showModal="showBetModal"  @closeBetModal="closeBetModal()"/>
  </n-card>
</div>

</template>

<script lang="ts">
import { defineComponent, h, onMounted, ref, reactive } from "vue";
import {
  DataTableColumns,
  NDataTable,
  NSelect,
  PaginationInfo,
  NCard,
  NIcon,
} from "naive-ui";
import { RowData } from "naive-ui/es/data-table/src/interface";
import CurrencyFormatter from "@/components/formatters/CurrencyFormatter.vue";
import PercentageFormatter from "@/components/formatters/PercentageFormatter.vue";
import { useAuth0 } from "@auth0/auth0-vue";
import axios from "axios";
import Bet from "@/models/Bet";
import { AddCircleOutline } from "@vicons/ionicons5";
import BetModal from "@/components/modals/bet-modal.vue";

var data = ref([] as Bet[]);
var loading = ref(false);

export default defineComponent({
name: "Bets",
components: {
NDataTable,
NCard,
AddCircleOutline,
NIcon,
BetModal
},
setup() {
const dataRef = ref([] as Bet[]);
});

const showBetModal = ref(false);
return {
  showBetModal: showBetModal,
  closeBetModal: () => {
    showBetModal.value = false;
  },
    };
  },
});
</script>

和我现在有模态组件，因为我正在传递一个道具来控制模态是打开还是关闭的。我尝试使用它与设置（props，{emit}），与此使用。

best-modal.vue

<template>
   <n-modal :show="show" @close="closeBetModal()">
        <n-card title="Add Bets">
        
            <template #footer>
                <n-button @click="show = false">Cancel</n-button>
                <n-button @click="show = false">Add</n-button>
            </template>
        </n-card>
    </n-modal>
</template>

<script>
import { defineComponent, ref } from "vue";
import { NModal, NButton, NCard } from "naive-ui";
export default defineComponent({
    name: "BetModal",
    components: {
        NModal,
        NButton,
        NCard
    },
    props: {
        showModal: {
            type: Boolean,
            required: true
        },
    },
    emits: ["closeBetModal"],
    setup(props, { emit }) {

        const show = ref(props.showModal);
        const closeBetModal = () => {
            emit("closeBetModal");
        };
        return {
            show: show,
            closeBetModal
        }
    },
    watch: {
        showModal: function(newValue){
           this.show = newValue;
        }
    }

})
</script>

我也看不到事件在vue-devtools中触发。