When we want to increase the value in the child component, Vue gives us an error message that this is not recommended way.

Why is it not recommend?

If the data v-model in the parent is changed, the data in the child component will re-render.

For example, I add any number in the input, and I increase the number using the plus button. What happens if I add a new value in the input?

The value that we increased just now is getting a new value from the input.

Get it?

How do we solve it?

Since we cannot modify the props data directly, so we need to replicate the props data into a variable.

In the addNumber methods, assign the props into a new variable, and do the calculation.

letmyNumber=this.number;myNumber++;

The next question is, how do we send the new number value to the parent? 🤔

Thank god, there is a custom event to solve it. We need to add the custom event in the addNumber methods.

this.$emit("update-number",myNumber);

It’s mean that we’re sending a myNumber data through update-number event name. Since we’re sending a custom data, the parent component needs to listen to the update-number event.

In the App.vue, add the listener to the Card component.

<Card:number="number"@update-number="update"/>

If there’s an emit event called update-number triggered in the child component, update function will be called.

In the App.vue file, add the update function in the methods section.

methods:{update(number){this.number=number;}}

Remember, when we’re sending the custom event, we’re sending myNumber as a parameter. So, in the update function need to have one parameter to get the data.

this.$emit("update-number",myNumber);

After that, the new value we get from the custom event will be assigned to the number data. Since, the child component data will be re-render if every time the props data changed, we can see the instant update in the Card component.