Question

我有一个像这样的组件：

<vue-component show></vue-component>

您会看到有一个show道具。我无法使用typeof，因为它总是undefined，因为没有价值。请帮忙！

Answer 1

好吧，您将在模板中使用以下内容：

<div v-if="show">
...
</div>

如果您需要检查脚本内部，您可能会知道：

if(this.show) {

然后

typeof show // will always be undefined

因为还可以使用this访问道具：

typeof this.show // will return Boolean as you're just passing show
// which is simply like `:show="true"`

Answer 2

作为Bhojendra Rauniyar答案的附录，您应该将默认值设置为false：

Vue.component('my-component', {
  template: `
<div>
My Component
<div v-if="show">Show Hidden</div>
</div>`,

props: {'show': {type: Boolean,default: false} }  
//props:['show'], //<--- Wont work
})

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <my-component show></my-component>
</div>

Answer 3

因为您不将任何数据传递到此子组件。

<template>
    <vue-component :show="show"></vue-component>
</template>

您的数据属性显示必须为true或false

如何检查Vue中是否存在道具？

3 个答案: