vue3 defineProps

In Vue 3, defineProps is a function that can be used in the setup() function of a component to define the props that the component accepts. It takes an object as its argument, with each key representing a prop name and its value representing the prop's type or default value.

For example:

import { defineProps } from 'vue'

export default {
  props: {
    message: String,
    count: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    // use props.message and props.count here
  }
}

can be rewritten using defineProps like this:

import { defineProps } from 'vue'

export default {
  setup(props) {
    const { message, count } = defineProps({
      message: String,
      count: {
        type: Number,
        default: 0
      }
    })

    // use message and count here
  }
}

This allows for a more concise and clear way of defining props in Vue 3 components.