我在这里遇到了一个问题，我觉得我并没有真正理解。我包含了一个子组件，它传递了一个名为“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
}
}
}
这也没有起作用。
在你的导出默认值上，
props: { active: { type: Boolean, default: false } }在你的组件模板上，
<template> <div v-if="active !== false"> 仅在 active 为真时显示 {{ active }}</div> </template>在使用组件时，将 active 元素绑定为 false
这是因为你的prop是从父组件传递过来的字符串（与其他HTML属性的默认行为相同）。为了将prop作为布尔值传递，你需要使用
v-bind语法或:简写，这样false将被解析为一个JavaScript表达式而不是字符串：或者