我在這裡遇到了一個問題，我覺得我並沒有真正理解。我包含了一個子元件，它傳遞了一個名為「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表達式而不是字串：或