Vue中子组件修改父组件传递的布尔值的实现疑问

我明白你在Vue里遇到的这个困扰啦！React里用useState配合props来回传值的思路在Vue里得调整一下，因为Vue遵循单向数据流的规则——父组件传递给子组件的props是只读的，子组件直接修改props不仅会报错，还不符合Vue的设计原则。咱们得通过「子组件触发自定义事件，父组件监听事件并修改自身状态」的方式来实现需求，下面结合你的代码一步步调整：

第一步：修正父组件代码 #

父组件里不需要defineProps（这是子组件用来接收props的API），咱们要给子组件添加一个事件监听，用来接收子组件的“关闭”通知，然后自己修改showProduct的值：

<template>
  <button @click="viewProduct">打开组件</button>
  <!-- 监听子组件触发的close-product事件，收到后把showProduct设为false -->
  <ChildComponent v-if="showProduct" :showProduct="showProduct" @close-product="showProduct = false" />
</template>

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

let showProduct = ref(false)
const viewProduct = () => {
    showProduct.value = true
}
</script>

第二步：修改子组件代码 #

子组件需要先定义要触发的自定义事件，然后在点击关闭按钮时，通过emit把事件传递给父组件，让父组件去修改状态：

<template>
  <div class="close" @click="hidePDP">X</div>
</template>

<script setup>
// 定义要触发的自定义事件
const emit = defineEmits(['close-product'])

const hidePDP = () => {
    // 触发事件，通知父组件执行关闭逻辑
    emit('close-product')
}
</script>

为什么要这么做？ #

Vue的单向数据流是为了让组件间的状态变化更可追踪：父组件负责管理状态，子组件只需要专注于展示和触发交互，把状态修改的逻辑交还给父组件，这样整个应用的状态流转会更清晰，不容易出现难以排查的bug。

如果你的逻辑更复杂，也可以在父组件里写一个专门的方法来处理关闭，比如：

// 父组件script里添加
const hideProduct = () => {
  showProduct.value = false
}

然后模板里改成@close-product="hideProduct"，这样扩展性更强~

备注：内容来源于stack exchange，提问作者Chobbit