VueJs：无效的道具：预期的布尔值，未定义答案

【问题标题】：VueJs: Invalid prop:Expected Boolean, got UndefinedVueJs：无效的道具：预期的布尔值，未定义
【发布时间】：2020-07-25 10:02:57
【问题描述】：

使用组件时出现两个错误

[Vue 警告]：属性或方法“premium”未在实例，但在渲染期间引用。确保该属性是反应式，无论是在数据选项中，还是对于基于类的组件，通过初始化属性

[Vue 警告]：无效的道具：道具“高级”的类型检查失败。预期的布尔值，未定义

这是我的代码：

HTML：

<!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>eCommerce</title>
    </head>

    <body>

      <div id="app">
        <product :premium='premium'></product>
      </div>




      <script src="public/plugins/bootstrap-4.3.1/js/bootstrap.min.js">
      <script src="public/js/vue.js"></script>
      <script src="public/js/app.js"></script>
    </body>

</html>

app.js

Vue.component('product', {
      props: {
        premium: {
          type: Boolean,
          required: true
        }
      },
      template: `
        <div class="container">
           <p>{{ premium }}</p>
        </div>
    `,
      data() {
        return {
          cart: 0,
          color: "white"
        }
      },
      methods: {
        addToCart() {
          return this.cart++
        },

      }

    }) //component

    var app = new Vue({
      el: '#app',

});

【问题讨论】：

我在数据部分的新 Vue 声明中没有看到 'premium' 属性，这就是 VueJS 给你这些错误的原因。

标签： vuejs2

【解决方案1】：

这里有两个问题：

必需的属性已被引用但未定义
无效的属性类型

定义所需的道具

您需要定义一个初始值，因为属性是必需的。最好使用 default：

Vue.component('product', { 
  props: {
     premium: {
        type: Boolean,
        required: true,
        default: false
     }
  },

另见[Vue warn]: Property or method is not defined on the instance but referenced during render

绑定一个有效类型的值

你是 [动态绑定][1]（用冒号 : 表示为缩短的 v-bind 前缀）一个 JavaScript 表达式 premium 到布尔属性.

假设没有定义此名称的变量 premium，它将评估为 JavaScript 值 Undefined，而不是必需的有效布尔值 false 或 true。因此警告。

尝试使用动态绑定或简单的静态绑定将其绑定到一个常量，例如：

<product premium="true"></product>

另见Vuejs error, Invalid prop: type check failed for prop. Expected Date, got Number with value

关于道具的进一步阅读

【讨论】：

【解决方案2】：

因为您没有定义数据属性，只需将新属性添加到您的实例，请参见：

var app = new Vue({
  el: '#app',
  data: {
   // i set true because your component requires Boolean type
   premium: true
  }
});

【讨论】：

保持组件自定义（隔离，松耦合）而不是在应用程序中全局定义其属性（强依赖）是一种很好的做法。因此，应该在组件内部进行定义，例如通过 default.