Different Cases where the Child Component tries to change Props

The following are the cases where the child component tries to modify the 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 );

In VueJS, all the props are bonded between the child and properties is 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 VueJS warns the use. This is used as protection from altering the state of a parent-by-child component.