Nuxt中点击按钮打开非头部存储模态框的实现方法

你的代码存在三个核心问题，导致点击按钮无法打开模态框：

1. 头部组件未声明响应式的isOpen变量，点击按钮时的isOpen = true赋值完全无效
2. 模态框组件的isOpen是内部私有变量，与父组件状态完全隔离，无法被外部控制
3. 使用v-if手动控制模态框挂载，与MazDialog自身的显示逻辑冲突

修改后的头部组件代码 #

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

        <div class="header-buttons_end">
          <button class="header_button" @click="isOpen = true">Sign In</button>
          <teleport to="body">
            <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>

修改后的模态框组件代码 #

<template>
  <MazDialog v-model="localIsOpen" title="Dialog Title">
    <p>
      Your content
    </p>
    <template #footer="{ close }">
      <MazBtn @click="close">
        Confirm
      </MazBtn>
    </template>
  </MazDialog>
</template>

<script setup>
import { computed } from 'vue'
import MazDialog from 'maz-ui/components/MazDialog'
import MazBtn from 'maz-ui/components/MazBtn'

// 接收父组件传递的v-model值
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

// 触发父组件更新状态的事件
const emit = defineEmits(['update:modelValue'])

// 同步父组件与模态框内部的状态
const localIsOpen = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

关键修复点说明 #

• 头部组件必须声明isOpen响应式变量，才能实现点击按钮时的状态切换
• 通过Vue的双向绑定机制（v-model + defineProps/defineEmits），实现父组件与模态框组件的状态同步
• 移除头部组件中的v-if，让MazDialog自身处理显示隐藏逻辑，避免手动挂载卸载带来的冲突
• 补充导入MazBtn组件，避免按钮无法渲染的问题

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