CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-cli
EdouardHrgt
EdouardHrgt

Reputation: 69

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 !

Upvotes: 1

Views: 782

Answers (1)

天木晴天
天木晴天

Reputation: 36

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

Upvotes: 2

Related Questions