VueJS：将数据值从子组件发送到父组件答案

【问题标题】：VueJS: Sending data value from child component to parentVueJS：将数据值从子组件发送到父组件
【发布时间】：2022-08-02 17:15:11
【问题描述】：

我在index.vue 中有一个 Vue 组件渲染

在索引.vue我们有一些数据：

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

和里面的组件索引.vue ：

<SplashBox v-if=\"splashIsActive\"/>

然后，如果我们去 splashBox 那里有一个按钮。

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

有什么方法可以创建一个方法，在单击按钮后发送或将 splashIsActive 更改为false，而不是存储在 index.vue 中的 true ？

标签： javascript vue.js

【解决方案1】：

您需要 emit 向父级发送事件。

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


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

在父组件中。

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


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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

您可以使用道具将值从父级传递给子级。在按下键的子组件中，您可以发出一个事件来更新其值。为此，有必要将道具指示为同步：

<SplashBox: splashUnActive.sync="initValue">

然后单击按钮在 SplashBox 内：

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

【讨论】：