vue.js - 在另一个 props 的验证器中访问 props 值

Question

我想访问另一个 props 验证器中的 props 值:

props: {
  type: {
    type: String,
    default: "standard"
  },
  size: {
    type: String,
    default: "normal",
    validator(value) {
      // below I want to access the props `type` from above.
      return (this.type !== "caution" || this.type !== "primary") && value !== "mega"
    }
  }
}

但我收到 TypeError: Cannot read property 'type' of undefined .
任何的想法？

Answer 1

this Prop 中的变量 validator不引用 Vue 实例。而且，不幸的是，没有真正的方法可以在 Prop 的 validator 中引用另一个 Prop 的值。功能。

你可以做的一件事是在 Vue 实例的 $props 上设置一个观察者。对象，设置 immediate选项 true以便在创建组件时触发观察者。该观察者可以触发验证逻辑，其中 this是对 Vue 实例的引用。

这是一个简单的例子:

Vue.config.productionTip = false;
Vue.config.devtools = false;

Vue.component('child', {
  template: '<div></div>',
  props: {
    type: {
      type: String,
      default: "standard"
    },
    size: {
      type: String,
      default: "normal"
    }
  },
  methods: {
    validateProps() {
      if ((this.type === "caution" || this.type === "primary") && this.size === "mega") {
        console.error('Invalid props');
      }
    }
  },
  watch: {
    $props: {
      immediate: true,
      handler() {
        this.validateProps();
      }
    }
  }
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <child type="caution" size="mega"></child>
</div>

另一种选择是传递一个带有 type 的对象。和 size属性作为单个 Prop 。这样 validator该 Prop 的引用将引用这两个值。

Vue.config.productionTip = false;
Vue.config.devtools = false;

Vue.component('child', {
  template: '<div></div>',
  props: {
    config: {
      type: Object,
      default: () => ({ type: "standard", size: "normal" }),
      validator({ type, size }) {
        return !((type === "caution" || type === "primary") && size === "mega");
      }
    }
  }
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <child :config="{ type: 'caution', size: 'mega'}"></child>
</div>

(请注意:您的验证逻辑可能不正确。正如所写的那样，括号中的语句将始终计算为 true 。我在示例中更新了该逻辑，使其符合我认为您的意思。)