props validator
中的this
变量不引用Vue实例.不幸的是,在props 的validator
函数中没有真正的方法来引用另一props 的值.
可以做的一件事是在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>
另一种 Select 是将具有type
和size
属性的对象作为单个props 传递.这样,props 的validator
将引用这两个值.
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
.我在示例中更新了该逻辑,使其符合我认为您的意思.)