道具丢失怎么办?

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
   },
}