Vue3中如何从其他组件设置目标组件的内部状态值

核心逻辑遵循Vue单向数据流规则，通过父组件传参控制子组件状态，子组件通过事件通知父组件状态变更，不要直接修改子组件内部的私有状态。

1. 改造Modal.vue组件 #

将原来组件内部写死的open状态改造为支持外部传参控制，同时同步内部关闭操作的状态给父组件，替换原有<script setup>部分代码如下：

<script setup>
import { ref, watch } from 'vue'
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
import { CheckIcon } from '@heroicons/vue/outline'

// 接收父组件传入的显示控制参数
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  }
})

// 定义向父组件派发的关闭事件
const emit = defineEmits(['close'])

// 组件内部同步维护显示状态
const open = ref(props.isOpen)

// 监听父组件传值变化，实时同步内部状态
watch(() => props.isOpen, (newVal) => {
  open.value = newVal
})

// 统一关闭逻辑，更新内部状态同时通知父组件
const closeModal = () => {
  open.value = false
  emit('close')
}
</script>

注意：组件模板中所有触发模态框关闭的交互（点击遮罩、点击关闭按钮、按ESC键触发关闭），都需要绑定调用上面的closeModal方法，保证父子状态完全同步。

2. 调整Home.vue的调用方式 #

在父组件中维护模态框的显示状态，通过props传给Modal组件，同时监听子组件的关闭事件更新本地状态：

<template>
  <!-- 触发模态框打开的按钮 -->
  <button @click="showPostModal = true">打开弹窗</button>
  <!-- 传入控制参数，绑定关闭事件 -->
  <Modal :isOpen="showPostModal" @close="showPostModal = false" />
</template>

<script>
import Modal from '../Shared/Modal/Post';

export default {
  components: {
    Modal
  },
  data() {
    return {
      // 模态框显示控制状态，默认隐藏
      showPostModal: false
    }
  }
}
</script>

完成改造后，只要在Home组件任意逻辑位置将showPostModal设为true，就能触发模态框显示。

注意事项 #

• 该写法保证Modal组件的通用复用性，后续其他页面引入该组件时，只需要维护自己的本地显示状态即可
• 如果需要页面加载时默认显示模态框，直接将showPostModal初始值设为true即可，不需要修改Modal组件代码
• 不要通过ref直接获取子组件实例修改内部open值，会导致父子状态不同步，出现难以排查的bug

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