vue3的props的具体使用方法

Vue3中的props使用方法与Vue2相比有一定的变化和优化。

定义props

在Vue3中，我们可以使用defineProps来定义props，如下：

import { defineComponent, defineProps } from 'vue'

export default defineComponent({
  props: defineProps({
    // props定义
  }),
  setup(props) {
    // props使用
  }
})

可以看到，Vue3中我们使用defineProps来定义props，而不是在props选项中直接定义。这样做的好处是可以更加明确地定义props的类型和默认值。

props验证

在Vue3中，我们可以使用PropType来定义props的类型。如下：

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

export default defineComponent({
  props: defineProps({
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    },
    gender: {
      type: String as PropType<'male' | 'female'>,
      default: 'male'
    }
  }),
  setup(props) {
    // props使用
  }
})

可以看到，我们可以在defineProps中定义props的类型和默认值，并且可以使用PropType来定义更加复杂的类型，如枚举类型。

props传递

在Vue3中，我们可以使用v-bind来传递props，如下：

<template>
  <child-component v-bind="props"></child-component>
</template>

<script>
import { defineComponent, defineProps } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const props = defineProps({
      // props定义
    })

    return {
      props
    }
  }
})
</script>

可以看到，我们可以使用v-bind来传递props，而且可以使用defineProps来定义props并在setup函数中使用。