Vue 3 Composition API：即使值为 False 也渲染 Props 和 v-if

Question

我在这里遇到了一个问题，我觉得我并没有真正理解。我包含了一个子组件，它传递了一个名为“active”的prop，可以设置为true或false。想法是如果传递的是“true”，那么组件的一部分会显示出来，如果传递的是“false”，则不显示。

根据我的理解，我应该能够只使用prop名称，像这样做：

<template>
   <div v-if="active">这是active的值：{{active}}</div>
</template>

问题在于，如果我直接将上述语句中的v-if设置为true或false，那么它会按预期工作。如果我将其作为prop传递进来，无论是true还是false，它总是显示。

有效（不显示任何内容）：

<template>
   <div v-if="false">这是active的值：{{active}}</div>
</template>

无效（无论active的值是什么，div中的内容都会显示）：

//-File1---------------------------------------

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

//-File2---------------------------------------

<template>
   <div v-if="active">这是active的值：{{active}}</div>
</template>

<script>
    export default{
        props:['active']
    }
</script>

为什么会这样？我通过显示“active”的值进行了确认，它传递的值是false，但是它仍然会渲染，尽管值为false。我在这里漏掉了什么吗？我尝试过使用引号、不使用引号，使用ref将其传递给本地值并使用它：

import { ref } from 'vue';

export default{
    props:['active']
    setup(props,ctx){
        const active = ref(props.active);
        return {
            active
        }
    }
}

这也没有起作用。

Answer 1

在你的导出默认值上，

props: {
    active: {
      type: Boolean,
      default: false
    }
}

在你的组件模板上，

<template>
   <div v-if="active !== false"> 仅在 active 为真时显示 {{ active }}</div>
</template>

在使用组件时，将 active 元素绑定为 false

<myComponent :active="false" />

Answer 2

这是因为你的prop是从父组件传递过来的字符串（与其他HTML属性的默认行为相同）。为了将prop作为布尔值传递，你需要使用v-bind语法或:简写，这样false将被解析为一个JavaScript表达式而不是字符串：

<template>
   <myComponent v-bind:active="false" />
</template>

或者

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