Vue中如何从子组件修改父组件的Boolean变量？

核心原因 #

Vue遵循单向数据流规则，props是父组件传递给子组件的只读数据，子组件直接修改props会触发只读错误，同时也不符合Vue的设计规范。

解决方案步骤 #

1. 父组件修改：将变量改为响应式并监听子组件事件

首先，父组件中的isFinished需要定义为响应式变量（否则变量更新后视图不会自动渲染），同时给子组件绑定自定义事件，用于接收子组件的修改请求：

<script setup>
import { ref } from 'vue';
// 定义响应式变量
const isFinished = ref(false);

// 处理子组件触发的事件，更新变量值
const handleFinish = (newValue) => {
  isFinished.value = newValue;
};
</script>

<template>
  <Child
    v-if="!isFinished"
    :isFinished="isFinished"
    @update-finish="handleFinish"
  />

  <Child2 v-if="isFinished" :isFinished="isFinished" />
</template>

2. 子组件修改：触发自定义事件传递新值

子组件中不再直接修改isFinished prop，而是通过$emit触发父组件绑定的自定义事件，将需要更新的值传递给父组件：

<script>
export default {
  props: {
    isFinished: Boolean
  },
  methods: {
    submit(e) {
      console.log('prop received:', this.isFinished);
      // 触发自定义事件，传递新值true
      this.$emit('update-finish', true);
    }
  }
}
</script>

额外说明 #

如果使用Vue3的<script setup>语法，子组件中可以用defineEmits来声明事件，写法更规范：

<script setup>
const props = defineProps(['isFinished']);
const emit = defineEmits(['update-finish']);

const submit = (e) => {
  console.log('prop received:', props.isFinished);
  emit('update-finish', true);
};
</script>

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