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

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', {
  //props:['show'] <--- Wont work
  props: {
      'show': { 
          type: Boolean, 
          default: false
       } 
  },  
  template: `<div>show is: {{show}}</div>`
})

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>

​