One-Way Data Flow
In Vue.js, all the props are bonded between the child and properties are one-way-down. When we update the prop in the parent component it is updated to all the child components but the reverse does not happen and vue.js warns the use.
Cases When child component tries to change Props:
- When the Child component gets props from the parent and wants to use it as a local data property. In such a case, we can use a local variable of the child component that is initialized with props value.
props = defineProps(['props1']);
// Variable intialize with props value
temp = props1;
- When we need some props that are not in the final data, it is raw data for final data. In such a case, we can use computed property with the prop’s value.
props = defineProps(['firstName', 'lastName']);
// Applying computed property on props
fullName = computed(() => firstName + lastName);
Mutating Object / Array Props
Vue.js does not prevent the array and object mutation because the array and object are passed as a reference to the child and prevention is expensive as compared to others.
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