vue子组件接收props时校验并给出默认值怎么做

在Vue中，我们可以使用props来向子组件传递数据。为了确保传递的数据是正确的，我们可以对props进行校验，并为其设置默认值。

校验props需要使用Vue提供的prop验证机制，可以使用Vue提供的propTypes来进行校验。同时，我们可以使用default属性为prop设置默认值。

下面是一个示例代码：

Vue.component('my-component', {
  props: {
    // 校验类型为String，且默认值为'Hello World'
    title: {
      type: String,
      default: 'Hello World'
    },
    // 校验类型为Number，且默认值为0
    count: {
      type: Number,
      default: 0
    }
  }
})

在上面的示例中，我们为title和count两个prop分别设置了类型和默认值。当传递的数据类型不符合要求时，Vue会在控制台输出警告信息。

如果需要更加细粒度的校验，我们可以使用自定义的校验函数。示例如下：

Vue.component('my-component', {
  props: {
    // 自定义校验函数
    age: {
      type: Number,
      validator: function (value) {
        return value >= 18 && value <= 100
      }
    }
  }
})

在上面的示例中，我们为age prop设置了一个自定义的校验函数。只有当传递的值大于等于18并且小于等于100时，才会通过校验。如果不符合要求，Vue同样会在控制台输出警告信息。