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.