VueJS: Sending data value from child component to parent-CodePudding

I have a Vue compoment rendering inside index.vue

In index.vue we have some data :

data(){
      return {
      splashIsActive: true,
      tutorialIsActive: false,
      gameIsActive: false
      }
    }

and the component inside index.vue :

<SplashBox v-if="splashIsActive"/>

Then, if we go to splashBox there's a button.

<button @click="debug">....

Is there any way to create a method that after clicking the button sends, or changes splashIsActive to false, instead of true as it is stored in index.vue ?

CodePudding user response：

You need to emit an event to the parent.

<button @click="debug">....


methods: {
   debug() {
     this.$emit('setSplashUnActive', false)
   }
}

In the parent component.

<SplashBox v-if="splashIsActive" @setSplashUnActive="setSplashUnActive" />


methods: {
   setSplashUnActive(value) {
      this.splashIsActive = value
   }
}

CodePudding user response：

You can achieve this by emitting an event from the button.

<button @click="$emit('updateSplashState', false)">...</button>

Then, You can capture this event in parent component.

<SplashBox v-if="splashIsActive" @updateSplashState="splashIsActive = $event"/>

Live Demo :

Vue.component('splashbox', {
  template: `<button @click="$emit('update-splash-state', false)">Update</button>`
});

var app = new Vue({
  el: '#app',
  data: {
    splashIsActive: true
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <SplashBox v-if="splashIsActive" @update-splash-state="splashIsActive = $event"></SplashBox>
</div>