Vue.js 从子组件更新父组件数据

在本文中，我们将介绍Vue.js中如何从子组件更新父组件的数据。在Vue.js中，组件之间的数据传递是通过props和emit来实现的。通过props可以将数据从父组件传递给子组件，而通过emit可以在子组件中触发一个自定义事件，从而更新父组件的数据。

阅读更多：Vue.js 教程

在父组件中传递数据给子组件

首先，我们需要在父组件中将数据传递给子组件。这可以通过props来实现。在父组件中定义一个数据，然后通过props将其传递给子组件。

<template>
  <div>
    <child-component :data="parentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Hello, World!'
    };
  }
};
</script>

在上面的代码中，我们定义了一个名为parentData的数据，并将其通过props传递给了子组件。

在子组件中更新父组件的数据

接下来，我们需要在子组件中更新父组件的数据。这可以通过emit来实现。在子组件中，我们可以定义一个方法，然后通过emit触发一个自定义事件，并将需要传递给父组件的数据作为参数传递给emit。

<template>
  <div>
    <button @click="updateParentData">更新父组件数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateParentData() {
      this.$emit('update', 'Updated Data');
    }
  }
};
</script>

在上面的代码中，我们定义了一个名为updateParentData的方法，并在方法中通过this.$emit触发了一个名为update的自定义事件。我们将需要传递给父组件的数据设置为’Updated Data’。

在父组件中更新数据

最后，我们需要在父组件中监听子组件触发的自定义事件，并在事件处理函数中更新父组件的数据。这可以通过在子组件的标签中使用v-on来实现。

<template>
  <div>
    <child-component :data="parentData" @update="updateData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Hello, World!'
    };
  },
  methods: {
    updateData(updatedData) {
      this.parentData = updatedData;
    }
  }
};
</script>