Vue 父组件如何修改数据

在 Vue 开发中，父组件修改数据是一个基础且关键的操作。掌握这一技巧，能够让我们更高效地构建交互式的前端应用。

我们要明确数据在 Vue 组件中的存储方式。在父组件中，数据通常定义在 data 函数返回的对象里。例如：

export default {
  data() {
    return {
      parentData: '初始数据'
    }
  }
}

要修改这个数据，最直接的方式就是在组件的方法中对其进行操作。我们可以定义一个方法，然后在需要的地方调用该方法来实现数据修改。

export default {
  data() {
    return {
      parentData: '初始数据'
    }
  },
  methods: {
    updateData() {
      this.parentData = '更新后的数据';
    }
  }
}

在模板中，我们可以通过按钮等元素来触发这个方法。

<template>
  <div>
    <p>{{ parentData }}</p>
    <button @click="updateData">更新数据</button>
  </div>
</template>

另一种常见的场景是在生命周期钩子函数中修改数据。比如 mounted 钩子函数，它在组件挂载完成后被调用，我们可以在这里根据某些初始条件修改数据。

export default {
  data() {
    return {
      parentData: '初始数据'
    }
  },
  mounted() {
    this.parentData = '在挂载后更新的数据';
  }
}

还有一种情况，当父组件与子组件进行交互时，子组件可能会传递一些信息给父组件，从而促使父组件修改数据。这时候我们可以通过自定义事件来实现。在子组件中触发一个自定义事件并传递数据：

<template>
  <button @click="sendDataToParent">发送数据到父组件</button>
</template>
<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('childEvent', '子组件传递的数据');
    }
  }
}
</script>

在父组件中监听这个事件并修改数据：

<template>
  <div>
    <child-component @childEvent="handleChildEvent"></child-component>
    <p>{{ parentData }}</p>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '初始数据'
    }
  },
  methods: {
    handleChildEvent(data) {
      this.parentData = data;
    }
  }
}
</script>

通过这些方式，我们能够灵活地在 Vue 父组件中修改数据，满足各种业务需求，打造出功能丰富的前端应用。