道具丢失怎么办？

Question

我想实现一个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')".

现在的问题是我怎样才能实现我的目标，为什么会出现这个错误？

Answer 1

我建议使用 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
   },
}

道具丢失怎么办？

How to deal with missing props?

vue.js

vue-component

vue-props