Vue 3中传入false值的Props配合v-if仍渲染内容的问题

核心原因 #

• 你在父组件传递prop时没有使用v-bind指令，导致传入的false实际是字符串类型的"false"，而非布尔值false。在JavaScript的隐式布尔转换中，非空字符串的判定结果永远为true，因此v-if会一直生效。
• 你后续将prop赋值给本地ref的操作不仅没有解决类型错误，反而会丢失prop的响应性：ref(props.active)只会在组件初始化时取一次prop的值，后续父组件修改active的值时，子组件的本地变量不会同步更新。
• 你打印时看到的false实际是字符串内容，和布尔类型的false不是同一个值，你可以通过typeof active打印确认，错误传值场景下返回的是string而非boolean。

修复步骤 #

1. 父组件传值时添加v-bind指令（可简写为冒号:），确保传入的是布尔值而非字符串：

<template>
   <myComponent :active="false" />
</template>

2. 删除不必要的本地ref定义，直接使用子组件props中的active即可，也可以优化子组件的props声明增加类型校验，提前规避类型错误：

<script>
export default{
    props: {
        active: {
            type: Boolean,
            default: false
        }
    }
}
</script>

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