vue3的props如何使用

Vue3的props使用与Vue2基本相同，不过有些细节上的改动。

1. 定义props

在Vue3中，可以使用defineProps函数来定义props。例如：

import { defineComponent, defineProps } from 'vue'

const MyComponent = defineComponent({
  props: {
    msg: String,
    count: {
      type: Number,
      default: 0
    },
    isDisabled: Boolean
  },
  setup(props) {
    return {
      // ...
    }
  }
})

也可以使用PropType来指定props类型，例如：

import { defineComponent, PropType } from 'vue'

const MyComponent = defineComponent({
  props: {
    msg: {
      type: String as PropType<string>,
      required: true
    },
    count: {
      type: Number as PropType<number>,
      default: 0
    },
    isDisabled: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup(props) {
    return {
      // ...
    }
  }
})

2. 使用props

在Vue3中，可以使用setup函数来访问props。例如：

import { defineComponent, defineProps } from 'vue'

const MyComponent = defineComponent({
  props: {
    msg: String,
    count: {
      type: Number,
      default: 0
    },
    isDisabled: Boolean
  },
  setup(props) {
    console.log(props.msg)
    console.log(props.count)
    console.log(props.isDisabled)

    return {
      // ...
    }
  }
})

3. 验证props

在Vue3中，可以使用validateProp函数来验证props。例如：

import { defineComponent, defineProps, validateProp } from 'vue'

const MyComponent = defineComponent({
  props: {
    msg: {
      type: String,
      default: '',
      validator: (value: string) => validateProp(value)
    },
    count: {
      type: Number,
      default: 0,
      validator: (value: number) => validateProp(value)
    },
    isDisabled: {
      type: Boolean,
      default: false,
      validator: (value: boolean) => validateProp(value)
    }
  },
  setup(props) {
    return {
      // ...
    }
  }
})