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>