vue 子组件修改父组件传来的值

Vue 2月前 75

在 Vue 中，父组件向子组件传递数据是非常常见的。但是，当子组件需要修改父组件传递过来的数据时，就需要一些特殊的技巧了。本文将介绍如何在 Vue 中实现子组件修改父组件传来的值。

通过事件传递

Vue 中，父组件向子组件传递数据是通过 props 属性实现的。如果子组件需要修改这个数据，就需要向父组件发出事件。具体步骤如下：

在子组件中定义一个方法，用于修改父组件传递过来的数据。

methods: {
  changeData() {
    this.$emit('change', 'new data');
  }
}

在父组件中监听子组件发出的事件，并在事件处理函数中修改传递过来的数据。

<child-component @change="handleChange"></child-component>

methods: {
  handleChange(newData) {
    this.data = newData;
  }
}

通过 .sync 修饰符

Vue 2.3 版本引入了 .sync 修饰符，用于简化子组件修改父组件数据的操作。具体步骤如下：

在父组件中使用 .sync 修饰符将数据传递给子组件。

<child-component :data.sync="data"></child-component>

在子组件中通过 $emit 方法向父组件发出 update:data 事件。

methods: {
  changeData() {
    this.$emit('update:data', 'new data');
  }
}

通过 .sync 修饰符，Vue 会自动将 update:data 事件转换为 data 属性的更新，从而实现子组件修改父组件数据的操作。

举例说明：

假设有一个父组件和一个子组件，父组件中包含一个数据属性 data，初始值为 10。子组件中包含一个按钮，点击按钮后可以将父组件传递过来的数据加 1。具体代码如下：

父组件：

<template>
  <div>
    <p>父组件数据：{{ data }}</p>
    <child-component :data.sync="data"></child-component>
  </div>
</template>

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

export default {
  data() {
    return {
      data: 10
    };
  },
  components: {
    ChildComponent
  }
};
</script>

子组件：

<template>
  <div>
    <button @click="changeData">修改数据</button>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    changeData() {
      this.$emit('update:data', this.data + 1);
    }
  }
};
</script>

在上面的代码中，父组件向子组件传递数据时使用了 .sync 修饰符，子组件中通过 $emit 方法发出了 update:data 事件。当用户点击子组件中的按钮时，子组件会将 data 属性加 1，并通过 update:data 事件向父组件发出通知。父组件监听到 update:data 事件后，会将自己的 data 属性更新为子组件传递过来的新值。这样，子组件就成功地修改了父组件传递过来的值。