Vue子组件修改父组件数据教程：四两拨千斤！

2023-10-09 09:02:06

子组件修改父组件数据：轻松掌握，尽在掌握之中！

在 Vue 的开发世界中，子组件和父组件之间的数据流动是至关重要的。为了确保应用的健壮性和可维护性，Vue 采用了单向数据流的原则。然而，在某些情况下，需要子组件修改父组件的数据。不要惊慌！Vue 为我们提供了两种简单有效的方法来实现这一目标：事件和**.sync 修饰符** 。

1. 事件：简单直接，传递数据

事件是子组件向父组件传递数据的首选方法。通过定义一个事件，子组件可以将数据作为参数发送给父组件。父组件可以通过监听此事件并执行适当的操作来响应。

代码示例：

// 子组件
<template>
  <button @click="updateData">更新数据</button>
</template>

<script>
export default {
  methods: {
    updateData() {
      this.$emit('update-data', '新数据');
    }
  }
};
</script>

// 父组件
<template>
  <child-component @update-data="updateData"></child-component>
</template>

<script>
export default {
  methods: {
    updateData(data) {
      this.data = data;
    }
  }
};
</script>

当子组件中的按钮被点击时，子组件触发 "update-data" 事件，并将 "新数据" 传递给父组件。父组件收到事件后，执行 updateData() 方法，将 "新数据" 更新到父组件的状态中。

2. .sync 修饰符：双向数据绑定，轻松搞定

.sync 修饰符建立了子组件和父组件之间强大的双向数据绑定。这意味着子组件和父组件都可以轻松修改对方的数据。

要使用 .sync 修饰符，只需在子组件的 props 中使用它。这允许数据在子组件和父组件之间自由流动。

代码示例：

// 子组件
<template>
  <input v-model="data">
</template>

<script>
export default {
  props: {
    data: {
      type: String,
      default: '',
      sync: true
    }
  }
};
</script>

// 父组件
<template>
  <child-component :data="data"></child-component>
</template>

<script>
export default {
  data() {
    return {
      data: '原始数据'
    };
  }
};
</script>