检查 prop 是否通过验证

Question

我有以下组件属性（它基本上是用于引导警报组件）：

props: {
    alertType: {
       validator: function (value) {
           return [ "success", "info", "warning", "danger" ].indexOf(value) >= 0;
       },
       default: "danger"
    },
// Some more things
 computed: { 
     classes: { //Compute the correct classes for the alert type
         var classesObj ={
             'alert-dismissible': this.dismissable
         };
         classesObj["alert-"+this.alertType]=true; //Problem if invalid
         return classesObj;
     }
 }

从某种意义上说，如果我不提供警报类型，它会使用“危险”，这很有效，但是如果我确实提供了警报类型并且它没有通过验证，那么 alertType 会设置为该值和控制台发出警告（据我所知，这是预期的行为）。

我的问题是，是否可以在 classes 计算属性中确定 alertType 属性是否通过或失败验证（理想情况下，如果验证失败，则根据组件属性定义获取并使用默认值。

Answer 1

据我所知，不，您不能从组件中引用 props 规范。不过，通过在组件定义之外定义 prop 规范，您可以非常接近，这样您就可以在设置 prop 和计算中使用它。

（无论出于何种原因，prop 验证实际上似乎并未在 sn-p 中运行。不会生成警告。）

const alertTypeSpec = {
  validator: function(value) {
    return ["success", "info", "warning", "danger"].indexOf(value) >= 0;
  },
  default: "danger"
};

new Vue({
  el: '#app',
  components: {
    pC: {
      template: '#pc-template',
      props: {
        alertType: alertTypeSpec
      },
      computed: {
        classes() { //Compute the correct classes for the alert type
          const classesObj = {
            'alert-dismissible': this.dismissable
          };
          const alertType = alertTypeSpec.validator(this.alertType) ? this.alertType : alertTypeSpec.default;

          classesObj["alert-" + alertType] = true; //Problem if invalid
          return classesObj;
        }
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <p-c alert-type="success"></p-c>
  <p-c alert-type="invalid"></p-c>
  <p-c></p-c>
</div>

<template id="pc-template">
  <div>Alert type is {{alertType}}, classes is {{classes}}</div>
</template>