道具丢失怎么办?
How to deal with missing props?
我想实现一个props checker
功能,用来处理意外道具问题的情况。下面是一个例子,
<GrandFater :scope="scope" :id="id" v-bind="$attrs" @error="error" v-on="$listeners">
<Father>
<GrandSon />
<Father/>
<GrandFather />
然后,在组件GrandSon
中,我将把这两个属性传递给一个函数来做进一步的处理,比方说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')"
.
现在的问题是我怎样才能实现我的目标,为什么会出现这个错误?
我建议使用 prop 验证 (see the website here).
您可以使用也包含 object 的 props 对象传递组件的 props。然后你可以指定默认参数(如果没有通过)或者甚至使用 required 道具(如果道具没有通过,这将抛出错误)。
All props are optional by default, unless required: true is specified.
示例:
props: {
myFirstProp: {
type: Object,
default: () => {scope: null},
required: true,
},
mySecondProp: {
type: String,
default: 'defaultValue'
},
myThirdProp: {
type: Boolean,
default: true
},
}
我想实现一个props checker
功能,用来处理意外道具问题的情况。下面是一个例子,
<GrandFater :scope="scope" :id="id" v-bind="$attrs" @error="error" v-on="$listeners">
<Father>
<GrandSon />
<Father/>
<GrandFather />
然后,在组件GrandSon
中,我将把这两个属性传递给一个函数来做进一步的处理,比方说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')"
.
现在的问题是我怎样才能实现我的目标,为什么会出现这个错误?
我建议使用 prop 验证 (see the website here).
您可以使用也包含 object 的 props 对象传递组件的 props。然后你可以指定默认参数(如果没有通过)或者甚至使用 required 道具(如果道具没有通过,这将抛出错误)。
All props are optional by default, unless required: true is specified.
示例:
props: {
myFirstProp: {
type: Object,
default: () => {scope: null},
required: true,
},
mySecondProp: {
type: String,
default: 'defaultValue'
},
myThirdProp: {
type: Boolean,
default: true
},
}