Vue 3 Composition API、Props 和 v-if 渲染尽管 false 值

Question

我有一个问题，我认为我没有真正理解这里的问题。我有一个包含的子组件，它传递一个“活动”道具，可以设置为 true 或 false。这个想法是，如果它通过了“true”，那么组件的一部分就会显示出来，如果它通过了“false”，它就不会显示。

据我了解，我应该可以只使用道具名称并执行类似的操作：

<template>
   <div v-if="active">this is the value of active: {{active}}</div>
</template>

这里的问题是，如果我在上面的语句中直接将v-if设置为true或false，那么它会按预期工作。如果我把它作为 prop 传递进去，它总是显示，不管是真还是假。

有效（不显示任何内容）：

<template>
   <div v-if="false">this is the value of active: {{active}}</div>
</template>

不起作用（无论 active 的值如何，div 中的内容都会显示）：

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

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

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

<template>
   <div v-if="active">this is the value of active: {{active}}</div>
</template>

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

这是为什么？我确认，通过显示它作为 false 传入的“active”的值，但尽管值为 false，它仍在呈现。我在这里错过了什么吗？我试过使用引号，不带引号，使用 ref 将其传递到本地值并使用它：

import { ref } from 'vue';

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

那也没用。

Answer 1

这是因为您的 prop 是作为字符串从父组件传入的（与所有其他 html 属性一样的默认行为）。为了将 prop 作为布尔值传递，您需要使用 v-bind 语法或简称 :，以便 false 被评估为 javascript 表达式 而不是字符串：

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

或者

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

Answer 2

在您的导出默认值上，

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

在您的组件模板上，

<template>
   <div v-if="active !== false"> show only when active {{ active }}</div>
</template>

使用组件时，将活动元素绑定为false

<myComponent :active="false" />

Vue 3 Composition API、Props 和 v-if 渲染尽管 false 值

Vue 3 Composition API, Props, and v-if rendering despite false value

javascript

vue.js

vue-component

vuejs3

vue-props