VueJS：將數據值從子組件發送到父組件

Question

我在index.vue中有一個 Vue 組件渲染

在index.vue我們有一些數據：

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

和index.vue里面的組件：

<SplashBox v-if="splashIsActive"/>

然后，如果我們 go 到 splashBox 有一個按鈕。

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

有沒有辦法創建一個方法，在單擊按鈕后發送或將 splashIsActive 更改為false ，而不是存儲在 index.vue 中的 true ？

Answer 1

您需要向父級emit事件。

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


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

在父組件中。

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


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

Answer 2

您可以通過從button發出事件來實現這一點。

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

然后，您可以在父組件中捕獲此事件。

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

現場演示：

 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>

Answer 3

您可以使用道具將值從父級傳遞給子級。 在按下鍵的子組件中，您可以發出一個事件來更新其值。 為此，有必要將道具指示為同步：

<SplashBox: splashUnActive.sync="initValue"></Checkbox>

然后單擊按鈕在 SplashBox 內：

this.$emit('update:splashUnActive.', newValue)