Ich stoße hier auf ein Problem, das ich meiner Meinung nach nicht wirklich verstehe. Ich füge eine untergeordnete Komponente hinzu, der eine Requisite namens „active“ übergeben wird, die auf „true“ oder „false“ gesetzt werden kann. Die Idee ist, dass bei Übergabe von „true“ ein Teil der Komponente angezeigt wird, bei Übergabe von „false“ nicht angezeigt wird.

Nach meinem Verständnis sollte ich in der Lage sein, einfach den Namen der Requisite zu verwenden, etwa so:

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

Das Problem ist, dass es wie erwartet funktioniert, wenn ich das v-if in der obigen Anweisung direkt auf true oder false setze. Wenn ich es als Requisite übergebe, egal ob wahr oder falsch, wird es immer angezeigt.

Aktiv (zeigt nichts):

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

Ungültig (unabhängig vom Wert von aktiv wird der Inhalt im Div angezeigt):

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

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

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

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

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

Warum ist das so? Ich habe es bestätigt, indem ich den Wert „aktiv“ angezeigt habe, und es wurde der Wert „falsch“ übergeben, aber es wird immer noch gerendert, obwohl der Wert „falsch“ ist. Vermisse ich hier etwas? Ich habe es mit Anführungszeichen und ohne Anführungszeichen versucht, indem ich ref verwendet habe, um ihm einen lokalen Wert zu übergeben, und ihn verwendet habe:

import { ref } from 'vue';

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

Das hat auch nicht funktioniert.