Vue 中子组件间接修改父组件传递过来的值

前端

2023-10-17 00:06:20

子组件间接修改父组件数据：深入剖析 Vue 中的事件通信

什么是数据绑定？

在 Vue.js 中，数据绑定是组件之间共享和通信数据的关键机制。它使组件能够实时响应数据的变化，从而创建交互式和动态的用户界面。

单向数据绑定与双向数据绑定

Vue 提供了两种数据绑定方式：

单向数据绑定： 数据只能从父组件流向子组件。子组件不能修改父组件的数据。
双向数据绑定： 数据可以在父组件和子组件之间双向流动。可以使用 .sync 修饰符来实现。

子组件间接修改父组件数据

子组件不能直接修改父组件传递过来的值。但是，可以使用以下方法间接实现：

1. 子组件触发事件

子组件可以通过使用 $emit 方法触发事件，并传递数据作为事件参数。

// 子组件
this.$emit('update-value', newValue)

2. 父组件监听事件

父组件可以通过使用 v-on 指令监听子组件触发的事件，并在事件处理函数中修改自己的数据。

// 父组件
<child-component @update-value="updateValue"></child-component>

methods: {
  updateValue(newValue) {
    this.value = newValue
  }
}

代码示例

以下示例演示了如何使用事件来实现子组件间接修改父组件数据：

子组件 (ChildComponent.vue)

<template>
  <input v-model="value">
  <button @click="$emit('update-value', value)">更新值</button>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

父组件 (ParentComponent.vue)

<template>
  <child-component @update-value="updateValue"></child-component>

  <p>父组件的值：{{ value }}</p>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    updateValue(newValue) {
      this.value = newValue
    }
  }
}
</script>