我在這裡遇到了一個問題，我覺得我並沒有真正理解。我包含了一個子元件，它傳遞了一個名為「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
        }
    }
}

這也沒有起作用。