API Komposisi Vue 3: Render Props dan v-if walaupun nilainya Salah

Question

Saya menghadapi masalah di sini yang saya rasa saya tidak begitu faham. Saya menyertakan komponen kanak-kanak yang diluluskan prop yang dipanggil "aktif" yang boleh ditetapkan kepada benar atau palsu. Ideanya ialah jika "benar" diluluskan, maka sebahagian daripada komponen akan dipaparkan, jika "salah" diluluskan, ia tidak akan dipaparkan.

Dari pemahaman saya, saya sepatutnya boleh menggunakan nama prop, seperti ini:

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

Masalahnya ialah jika saya tetapkan secara langsung v-jika dalam pernyataan di atas kepada benar atau salah, maka ia berfungsi seperti yang diharapkan. Jika saya menyampaikannya sebagai prop, sama ada benar atau palsu, ia sentiasa dipaparkan.

Aktif (tidak menunjukkan apa-apa):

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

Tidak sah (tidak kira apa nilai aktif, kandungan dalam div akan dipaparkan):

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

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

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

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

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

Kenapa ni? Saya mengesahkannya dengan menunjukkan nilai "aktif" dan nilai itu telah diluluskan, tetapi ia masih menghasilkan walaupun nilainya palsu. Adakah saya kehilangan sesuatu di sini? Saya telah mencuba dengan petikan, tanpa petikan, menggunakan ref untuk menyampaikan nilai setempat dan menggunakannya:

import { ref } from 'vue';

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

Ini juga tidak berjaya.

Answer 1

Pada lalai eksport anda,

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

Pada templat komponen anda,

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

Apabila menggunakan komponen, ikat elemen aktif kepada palsu

<myComponent :active="false" />

Answer 2

Ini kerana prop anda ialah rentetan yang diluluskan daripada komponen induk (sama seperti kelakuan lalai atribut HTML lain). Untuk menghantar prop sebagai boolean, anda perlu menggunakan v-bind语法或:简写，这样false yang akan dihuraikan sebagai ungkapan JavaScript dan bukannya rentetan:

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

atau

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