Vue3 + Naive UI Modal组件无法正常工作问题求助

核心问题 #

你的代码里modalVisible是普通变量，并非Vue3的响应式变量，导致Modal的显示状态无法被正确追踪更新；同时关闭按钮的事件逻辑未与状态绑定，弹窗自然无法正常触发和关闭。

修复步骤 #

1. 声明响应式状态
   在setup函数中用ref创建modalVisible变量，确保状态变化能触发视图更新：

import { ref } from 'vue';

export default defineComponent({
  setup() {
    const modalVisible = ref(false);
    // 其他逻辑
    return { modalVisible };
  }
});

2. 绑定Modal状态与关闭事件

• 将Modal的show属性绑定到modalVisible
• 利用Naive UI Modal自带的on-update:show事件更新状态，或直接给关闭按钮绑定点击事件修改状态值

完整修复后的代码片段：

<template>
  <n-button @click="modalVisible = true">打开弹窗</n-button>
  <n-modal
    :show="modalVisible"
    @update:show="modalVisible = $event"
    title="测试弹窗"
  >
    <div>弹窗内容</div>
    <template #action>
      <n-button @click="modalVisible = false">关闭</n-button>
    </template>
  </n-modal>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { NButton, NModal } from 'naive-ui';

export default defineComponent({
  components: { NButton, NModal },
  setup() {
    const modalVisible = ref(false);
    return { modalVisible };
  }
});
</script>

3. 验证组件注册
   确认NModal和NButton已在组件中正确注册，避免因未注册导致的渲染异常。

关键说明 #

在Vue3的TS语法（lang="ts"+defineComponent）中，必须使用ref/reactive声明响应式状态，普通变量的变化不会触发组件重新渲染，这是弹窗无法正常工作的核心原因。

内容的提问来源于stack exchange，提问作者Dennis