Different ways to define Props

• Using defineProps() : We can declare the props using defineprops() function:

<script setup >
    const student = defineProps([ 'name'] )
    console.log(student.name )
</scirpt>

• Using props option: We can define props using the props option:

export default {
    props: ['name']
}

We can also use objects in place of an array to declare props

 // In script setup 
defineProps({ name: String });

// In non scrpt setup 
export default {
    props: { name: String }
}

We can use TypeScript pure type annotations to declare props:

<script setup lang="ts">
    defineProps<{
      name ?: string
    }>()
</script>

Vue.js Props Declaration facilitates the declaration of props explicitly for the Vue components. With this, Vue can identify how external props are passed to the component that should be treated as fall-through attributes. In other words, Props of Vue components is a configuration for the transfer of data between the components. Props are not defined by default we have to define them to use data that is passed to components.