在HTML中传递布尔Vue prop值

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>

我已经看过另一种传统方法来实现这一点,但vue-cli以不同的方式呈现模板.

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

亲

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

儿童

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

那<div>仍然会显示,因此,我必须做一个明确的检查,看它是否评估'true'.由于类型强制的可能问题,我不是这个的粉丝,我发出一个警告,类型检查(===)说:

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

有没有办法让孩子将此prop作为布尔值进行评估,或者让父母将其作为布尔值传递给标记？

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">

参见概念验证:

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

new Vue({
  el: '#app'
});

<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>

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

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