vue 父传子指定类型

Vue在父组件向子组件传递数据时，可以通过props选项来实现。在父组件中定义props数组，数组的每个元素表示一个要传递给子组件的参数。子组件可以通过props选项指定props的类型、默认值、是否必须等。这样可以保证子组件可以正确、稳定地获取到父组件传递的数据，并避免意外的类型错误和空值引起的错误。

在props选项中可以指定props的类型，类型可以是 JavaScript 原生类型,例如String、Number、Boolean、Array、Object等，也可以是自定义的构造函数。当父组件传递数据给子组件时，Vue 会自动检查传递的数据是否符合指定的类型，如果类型不匹配会抛出错误。

在定义组件时，我们可以通过props选项来指定传递给子组件的prop的类型，例如：

Vue.component('child-component', {
  props: {
    msg: String,
    age: Number,
    isShow: Boolean,
    list: Array,
    person: Object,
    customProp: {
      type: CustomType,
      default: function () {
        return new CustomType()
      },
      required: true
    }
  }
})

上述代码中定义了6个prop，分别为msg、age、isShow、list、person和customProp。其中，前五个prop的类型分别为String、Number、Boolean、Array和Object，而最后一个prop的类型则为自定义的构造函数CustomType。自定义prop的类型需要定义一个构造函数，并在props选项中将类型指定为该构造函数，同时还可以指定该prop的默认值和是否必填。

当我们将这些子组件添加到父组件中时，可以指定相应的prop值，例如：

<child-component
  msg="Hello Vue"
  :age="18"
  :isShow="true"
  :list="[1,2,3]"
  :person="{name: 'Tom', age: 20}"
  :customProp="new CustomType()"
></child-component>

上述代码中，我们分别传递了字符串、数字、布尔值、数组、对象和自定义类型的值给子组件的相应prop。Vue会自动检查传递的数据类型是否符合props选项中定义的类型，如果类型不匹配会抛出错误。若要允许props传递空值，则需要在props选项中通过default来指定默认值。

综上所述，通过props选项来指定传递给子组件的prop类型，可以让组件之间的数据传递更加稳定可靠，避免数据类型错误和空值带来的问题。