Nuxt中如何从其他文件调用Modal窗口？点击Sign In无响应

问题原因 #

你的代码存在核心逻辑问题：Header组件的isOpen和Authorization组件内部的isOpen是两个完全独立的响应式变量，二者没有任何关联。

当点击按钮将Header的isOpen设为true时，Authorization组件会被渲染，但它内部的isOpen依然是初始的false，所以MazDialog始终处于隐藏状态。

修复方案 #

步骤1：修改Authorization.vue，支持外部状态控制 #

让组件接收外部传入的状态，并在对话框关闭时通知父组件更新：

<template>
  <MazDialog v-model="modelValue" title="Sign In">
    <p>
      Your content
    </p>
    <template #footer="{ close }">
      <MazBtn @click="close">
        Confirm
      </MazBtn>
    </template>
  </MazDialog>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import MazDialog from 'maz-ui/components/MazDialog'
import MazBtn from 'maz-ui/components/MazBtn' // 确保引入按钮组件

// 接收父组件传入的状态值
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

// 定义事件，用于通知父组件更新状态
const emit = defineEmits(['update:modelValue'])
</script>

步骤2：修改Header组件，绑定双向状态 #

将Header的isOpen通过v-model绑定到Authorization组件，实现状态同步：

<template>
  <section class="header">
    <div class="header-container">
      <div class="header_start">
        <a href="#!" class="header__logo">YooMoney</a>
      </div>

      <div class="header-buttons_end">
        <button class="header_button" @click="isOpen = true; console.log('Button clicked')">Sign In</button>
        <teleport to="body">
          <!-- 用v-model实现双向状态绑定 -->
          <Authorization v-model="isOpen" />
        </teleport>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Authorization from "@/components/ModalWindow/Authorization.vue";
const isOpen = ref(false)
</script>

额外检查项 #

• 确保MazUI在Nuxt中正确配置：如果通过模块安装，需在nuxt.config.ts中添加'maz-ui/nuxt'到modules数组；如果手动引入，要在全局样式中导入maz-ui/css/main.css。
• 确认MazBtn组件已正确导入，否则对话框底部的按钮可能无法正常显示。

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