Question

我对Vue相当新，并且开始使用vue-cli的项目。

我正在研究基于父母发送的道具的条件渲染。

Home.vue （父母）

<template>
    <Header have-banner="true" page-title="Home">

    </Header>
</template>

<script>
    import Header from "./Header";

    export default {
        components: {
            Header,
        },
        name: "Home",
        data() {
            return {
                header: "Hello Vue!",
            };
        },
    };
</script>

Header.vue （孩子）

<template>
    <header>
        <div v-if="haveBanner == 'true'">
            ...
        </div>
            ...
    </header>
</template>

我已经看过另一种conventional方法来实现这一目标，但vue-cli以不同的方式呈现模板。

当在HTML标记中传递prop时，prop haveBanner将作为字符串进行求值，因此，即使我这样做了：

父

<Header have-banner="false"></Header>

子

<div v-if="haveBanner"`>
    ...
</div>

<div>仍会显示，因此，我必须进行明确检查，看它是否评估为'true'。由于类型强制可能存在问题，我不喜欢这种情况，我会通过类型检查（===）发出警告：

二进制操作参数类型字符串与类型字符串
不兼容

是否有办法让孩子将此道具评估为布尔值，或者让父母将其作为标记中的布尔值传递？

Answer 1

如果传入JS关键字，例如布尔值或对变量的引用，则需要使用v-bind，即：

<Header v-bind:have-banner="true" page-title="Home">

这会将布尔值true绑定到prop，而不是"true"字符串。如果您未使用v-bind，则haveBanner道具总是是真实的，因为它是一个非零长度的字符串，无论您是否指定"true"或"false"到它。

友好提示：HTML标记不区分大小写，因此您可能希望使用custom-header或my-header-component代替Header：

<custom-header v-bind:have-banner="true" page-title="Home">

参见概念验证：

＆＃13;

Vue.component('custom-header', {
  template: '#customHeader',
  props: {
    haveBanner: Boolean,
    pageTitle: String
  }
});

new Vue({
  el: '#app'
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script>

<div id="app">
  <custom-header v-bind:have-banner="true" page-title="Home"></custom-header>
  <custom-header v-bind:have-banner="false" page-title="Home"></custom-header>
</div>
 
<script type="text/x-template" id="customHeader">
    <header>
        <div v-if="haveBanner">
          <code>haveBanner</code> is true!
        </div>
        <div v-else>
          <code>haveBanner</code> is false!
        </div>
    </header>
</script>

＆＃13;

专业提示：使用:缩写使您的模板更具可读性，即：

<custom-header :have-banner="true" page-title="Home">

Answer 2

要将布尔类型用作道具，必须使用 v：bind

<Header v-bind:have-banner="true" page-title="Home">

//or using a short syntax

<Header :have-banner="true" page-title="Home">

在HTML中传递布尔Vue prop值

2 个答案: