Vue3 Script Setup中如何在一个Prop内访问修改另一个Prop的值？

首先直接说结论：不能直接在closeModal2这个Prop里修改isOpen的Prop值，但可以遵循Vue单向数据流规则，实现获取并触发修改isOpen的需求。

先纠正你代码里的小问题 #

你的isOpen Prop定义了两次default，这会导致后面的default: false覆盖前面的default: true，应该只保留一个默认值：

const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false, // 仅保留一个默认值
  },
  closeModal: {
    type: Function,
    required: true,
  },
  closeModal2: {
    type: Function,
    required: true, // 建议加上required，确保父组件必传该方法
  },
});

为什么不能直接修改props？ #

Vue遵循单向数据流规则：所有props都形成单向向下的绑定——父级props的更新会向下流动到子组件，但反过来不行。这样能防止子组件意外修改父组件状态，避免应用数据流向混乱难追踪。如果直接在子组件里修改props.isOpen，控制台会抛出警告。

正确实现方式 #

1. 获取isOpen的值

在子组件里可以直接通过props.isOpen获取当前状态，比如在closeModal2的调用逻辑里判断：

// 子组件中某个触发逻辑
const handleTriggerClose2 = () => {
  // 获取当前isOpen状态
  console.log('当前弹窗状态:', props.isOpen);
  // 调用父组件传过来的closeModal2方法
  props.closeModal2();
};

2. 修改isOpen的值

修改逻辑必须放在父组件中，子组件通过调用closeModal2这个父组件传递的方法，通知父组件修改isOpen对应的状态：

父组件示例（Vue 3 setup语法）：

<template>
  <!-- 父组件中传递isOpen状态和closeModal2方法 -->
  <ModalComponent 
    :isOpen="isModalOpen" 
    :closeModal2="handleCloseModal2"
  />
</template>

<script setup>
import { ref } from 'vue';
import ModalComponent from './ModalComponent.vue';

// 父组件维护弹窗状态
const isModalOpen = ref(true);

// 父组件中定义修改状态的方法，传给子组件
const handleCloseModal2 = () => {
  isModalOpen.value = false;
  // 如果需要子组件传递自定义状态值，也可以接收参数：
  // const handleCloseModal2 = (newState) => { isModalOpen.value = newState; }
};
</script>

如果需要子组件控制修改后的状态（比如切换而非直接关闭），可以在调用closeModal2时传递参数：

// 子组件中
const toggleModal = () => {
  const newState = !props.isOpen;
  props.closeModal2(newState);
};

父组件对应修改：

const handleCloseModal2 = (newState) => {
  isModalOpen.value = newState;
};

3. 子组件需维护本地状态的场景

如果子组件需要基于isOpen维护自己的本地状态副本，可以通过watch同步props的值，修改本地副本后再通知父组件：

import { ref, watch } from 'vue';

const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false,
  },
  closeModal2: {
    type: Function,
    required: true,
  },
});

// 本地状态副本
const localIsOpen = ref(props.isOpen);

// 监听props变化，同步本地状态
watch(() => props.isOpen, (newVal) => {
  localIsOpen.value = newVal;
});

// 修改本地状态并通知父组件
const updateModalState = () => {
  localIsOpen.value = !localIsOpen.value;
  props.closeModal2(localIsOpen.value);
};

内容的提问来源于stack exchange，提问作者M Atif Mehmood