Vue 3不使用全局属性时如何触发特定同级组件打开指定Modal？

下面两种实现方案都不需要使用全局属性，也不需要把模态框状态冗余定义在根组件中，可适配多模态框的隔离需求：

方案1：独立状态模块（推荐用于多模态框、跨页面调用场景） #

把每个模态框的控制状态封装为独立的组合式函数（Composable）实例，状态仅被关联组件引入，完全隔离互不干扰：

// composables/useModal.js
import { ref } from 'vue'

// 通用模态框状态生成函数
function useModal() {
  const active = ref(false)
  const open = () => active.value = true
  const close = () => active.value = false
  const toggle = () => active.value = !active.value
  return { active, open, close, toggle }
}

// 导出各个模态框的独立实例
export const contactModal = useModal()
export const signUpModal = useModal()
export const otherModal = useModal()

在ContactModal组件中直接关联对应状态：

<!-- ContactModal.vue -->
<script setup>
import { contactModal } from '@/composables/useModal'
</script>

<template>
  <div v-if="contactModal.active" class="modal">
    <!-- 模态框内容 -->
    <button @click="contactModal.close">关闭</button>
  </div>
</template>

在Navbar、Hero组件中直接调用目标模态框的打开方法即可：

<!-- Navbar.vue 示例 -->
<script setup>
import { contactModal } from '@/composables/useModal'
</script>

<template>
  <nav class="navbar">
    <router-link :to="etc.">Home</router-link>
    <router-link :to="etc.">About</router-link>
    <a @click="contactModal.open">Contact</a>
  </nav>
</template>

新增模态框时仅需要在useModal.js中多导出一个实例即可，无需修改其他层代码。

方案2：父组件事件中转（适合组件同属一个父级的简单场景） #

如果所有模态框、Navbar、Hero都在同一个父组件下渲染，可以通过自定义事件+模板引用的方式实现调用：

1. 首先在Navbar、Hero组件中点击时抛出对应的自定义事件：

<!-- Navbar.vue 示例 -->
<script setup>
const emit = defineEmits(['openContactModal'])
</script>

<template>
  <a @click="emit('openContactModal')">Contact</a>
</template>

2. 在父组件中给ContactModal绑定模板引用，监听子组件事件调用对应方法：

<!-- 父组件示例（如App.vue） -->
<script setup>
import { ref } from 'vue'
const contactModal = ref(null)
</script>

<template>
  <ContactModal ref="contactModal" />
  <Navbar @open-contact-modal="contactModal.open" />
  <Hero @open-contact-modal="contactModal.open" />
</template>

模态框自身的关闭逻辑不受影响，直接调用内部的close方法即可。

内容的提问来源于stack exchange，提问作者Zack Plauché