Why does Vue update variable in parent - no event used

user_1949164 0
Viewed 171

According to Vue.js docs (Components: One-Way data Flow) I assumed that I'm not able to update parent's variable from child component.

How is it possible, that when I bind a variable to child component, it is updated without emitting any event?

Here is Vue SFC playground example.

How can I use a copy of variable in child component without propagating changes to parent?

Edit: I'm curious why the property userAccount in AccountPage.vue gets updated.

There's no v-model, no events submitted, yet it still gets updated.

vue-script-setup vuejs3 vue-component vue.js
2 Answers

Edit: In AccountForm.Vue an reactive and mutable ref object is created when writing

 const userAccount = ref ({..})

Changing the reactive object will affect the parent. If you remove the ref() you'll see that the parent isn't updated.

https://v3.vuejs.org/api/refs-api.html#ref

Old answer: When you use v-model you create a two-way data binding. V-model is a shorthand for v-bind and input, that is you bind data to child via v-bind and receive data via input event that is emitted from child.

So,

<input v-model="searchText">

is the same as writing

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

user_11321780

The example demonstrates the usage of v-model and as stated in the docs

Custom events can also be used to create custom inputs that work with v-model. Remember that:

<input v-model="searchText">

does the same thing as:

<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">

meaning it does fire an event

user_16552450
Related