javascript - 有没有办法在 Vue 中验证多个 Prop ？

我有一个有两个 props 的组件，但是为了使 有效，应该只提供一个 。
示例 :

    // either `email` or `phone` should be passed (but not both)
    props: {
        email: {
            type: String,
            required: true
        },

        phone: {
            type: String,
            required: true
        },
    }

有没有办法验证基于彼此的 Prop ？
我想把它放在生命周期钩子(Hook)的某个地方，但感觉不合适。

最佳答案

我认为生命周期钩子(Hook)不是放置验证逻辑的好地方，因为钩子(Hook)只被调用一次，因此如果 prop 值在 future 发生变化，那么你将不会再次获得相同的验证。相反，您可以尝试在 Vue 实例的 $props 对象上使用 set a watcher 来监视将来对 props 值的任何更改，并在每次更改时触发验证，例如:

props: {
  email: String,
  phone: String
},
methods: {
  validateProps() {
    // Here you can access both props and add your validation logic
    if(!this.email && !this.phone){
      console.error('Please add either email or phone props');
    }
  }
},
watch: {
  $props: {
    immediate: true,
    handler() {
      this.validateProps();
    }
  }
}

在这里，我添加了一个基本的验证逻辑，您可以根据您的要求对其进行更新。

关于javascript - 有没有办法在 Vue 中验证多个 Prop ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62677250/