Vue 3 Composition API: Render Props und v-if, auch wenn der Wert False ist

Question

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.

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>