vue.js 丢失 prop 怎么处理?

n9vozmp4  于 2023-03-09  发布在  Vue.js
关注(0)|答案(2)|浏览(329)

我想实现一个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')".
现在的问题是,我如何实现我的目标,为什么会发生这种错误?

nc1teljy

nc1teljy1#

我建议使用 * prop validation *(请参阅此处的网站)。
你可以使用props对象传递你组件的props,props对象也包含object,然后你可以指定默认参数(如果那些参数没有被传递)或者甚至使用requiredprop(如果props没有被传递,它会抛出一个错误)。
默认情况下,所有 prop 都是可选的,除非需要:指定为true。
示例:

props: {
   myFirstProp: {
      type: Object,
      default: () => {scope: null},
      required: true,
   },
   mySecondProp: {
      type: String,
      default: 'defaultValue'
   },
   myThirdProp: {
      type: Boolean,
      default: true
   },
}
798qvoo8

798qvoo82#

如果使用typescript和composition API,则可以在编译时检查它。

<script setup lang="ts">
export interface IComponentProps{
    a:number;
    b?:string;
    c?:Date;
}
const props = withDefaults(defineProps<IComponentProps>(),{
    c:new Date(),
});
</script>

此处的问号允许未定义该属性,因此该属性是可选的,但“a”不是。如果安装了Volar但未在组件上分配,则会在IDE中看到该错误。
参考:https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits

相关问题