API de composition Vue 3 : Render Props et v-if même si la valeur est False

Question

Je rencontre ici un problème que j'ai l'impression de ne pas vraiment comprendre. J'inclus un composant enfant auquel est transmis un accessoire appelé "actif" qui peut être défini sur true ou false. L'idée est que si "true" est passé, alors une partie du composant sera affichée, si "false" est passé, elle ne sera pas affichée.

D'après ce que j'ai compris, je devrais pouvoir utiliser simplement le nom de l'accessoire, comme ceci :

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

Le problème est que si je définis directement le v-if dans la déclaration ci-dessus sur vrai ou faux, alors cela fonctionne comme prévu. Si je le transmets comme accessoire, qu'il soit vrai ou faux, il s'affiche toujours.

Actif (ne montre rien) :

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

Invalide (quelle que soit la valeur de active, le contenu du div sera affiché) :

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

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

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

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

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

Pourquoi est-ce ? Je l'ai confirmé en affichant la valeur "active" et la valeur false lui a été transmise, mais le rendu est toujours affiché même si la valeur est fausse. Est-ce que j'ai râté quelque chose? J'ai essayé avec des guillemets, sans guillemets, en utilisant ref pour lui transmettre une valeur locale et en l'utilisant :

import { ref } from 'vue';

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

Cela n’a pas fonctionné non plus.

Answer 1

Sur vos paramètres d'export par défaut,

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

Sur votre modèle de composant,

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

Lors de l'utilisation de composants, liez l'élément actif à false

<myComponent :active="false" />

Answer 2

Cela est dû au fait que votre accessoire est une chaîne transmise par le composant parent (identique au comportement par défaut des autres attributs HTML). Afin de passer l'accessoire comme booléen, vous devez utiliser v-bind语法或:简写，这样false qui sera analysé comme une expression JavaScript au lieu d'une chaîne :

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

ou

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