我想实现一个props checker
函数,用来处理意外 prop 问题的情况,下面是一个例子。
<GrandFater :scope="scope" :id="id" v-bind="$attrs" @error="error" v-on="$listeners">
<Father>
<GrandSon />
<Father/>
<GrandFather />
然后在GrandSon
组件中,我会把这两个props传递给一个函数做进一步的处理,比如authorize
,现在我想做的是实现一个props checker
函数来检查这两个props是否有效,比如prop scope
是一个字符串,但是不能漏掉,也不能是空字符串。
不能错过表示必须在<GrandFather>
组件中声明,例如
<GrandFater :id="id" v-bind="$attrs" @error="error" v-on="$listeners">
<Father>
<GrandSon />
<Father/>
<GrandFather />
在上面的例子中,属性scope
丢失了,我想在我的函数中捕获错误。
class GrandFather extends Vue {
@Prop({ type: String }) id!: string;
@Prop({ type: String }) scope!: string;
mounted(){
if(propChecker(this)) return;
authorize(this);
}
}
在另一个JS文件中,我像这样实现propChecker
:
export function parameterChecker(vm) {
let error: String = "";
switch (vm) {
case !vm.id:
error = "Parameter Id missing.";
break;
case !vm.id.trim():
error = "Parameter Id cannot be empty.";
break;
case !vm.scope:
error = "Parameter scope missing.";
break;
case !vm.scope.trim():
error = "Parameter scope cannot be empty.";
break;
default:
return false;
}
vm.$emit("error", error);
return true;
}
但现在的问题是如果我错过了一个 prop ,比如scope
,它会报告一个错误:[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'trim')"
.
现在的问题是,我如何实现我的目标,为什么会发生这种错误?
2条答案
按热度按时间nc1teljy1#
我建议使用 * prop validation *(请参阅此处的网站)。
你可以使用props对象传递你组件的props,props对象也包含object,然后你可以指定默认参数(如果那些参数没有被传递)或者甚至使用requiredprop(如果props没有被传递,它会抛出一个错误)。
默认情况下,所有 prop 都是可选的,除非需要:指定为true。
示例:
798qvoo82#
如果使用typescript和composition API,则可以在编译时检查它。
此处的问号允许未定义该属性,因此该属性是可选的,但“a”不是。如果安装了Volar但未在组件上分配,则会在IDE中看到该错误。
参考:https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits