Props Declaration
- 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>
Refer to the Vue.js Props Declaration article for detailed description.
Vue.js Props
Vue.js Props is an attribute to the configuration of the component. It is used to pass the data to the component to work dynamically. The props configuration defines the type of data it can receive from different components of Vue.
Table of Content
- Props Declaration
- Prop Passing Details
- One-Way Data Flow
- Prop Validation
- Boolean Casting