Search code examples
javascriptvue.jsvue-componentvue-cli

Vue Js child to parent custom event

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 !

Solution

  • There are two options to accomplish what you need:

    Option 1: v-model

    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">

    Option 2: v-bind:value.sync

    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">