I'm actually struggling quite a bit about transmitting info between a child component to a parent component in a Vue-js-2 cli project.
So I have a popup modal that appears when a data is true
<component v-if="profile" />
this popup contains my child component (a profile page) now how Am I supposed to be able to close this popup ?
I added a little "cross icon" in it so I need on a click event to say to the parent that this.profile = false
I'm sure that I need to do it in a $emit event but don't understand how to modify a data from parent in a custom child event... thanks for any help !
There are two options to accomplish what you need:
You can refer to v-model
<component v-model="value">
This is equivalent to (in most cases)
<component v-bind:value="data" v-on:change="data = $event">
How sync modifier of v-bind achieves two-way data transmission. But in fact, these expressions are syntax sugar for event processing.
<component v-bind:value.sync="data">
equivalent to
<component v-bind:value="data" v-on:update:value="data = $event">