子组件改变父组件数据？在Vue中，如何优雅实现双向通信？

前端

2022-11-11 01:05:27

Vue.js 中子组件与父组件的双向通信：实现指南

在 Vue.js 中，父子组件之间的通信至关重要，以维护应用程序的响应性和状态管理。通常，遵循单向数据流原则，数据从父组件传递到子组件，以确保稳定性。然而，有时双向通信是必要的，子组件需要影响父组件数据。

双向通信的必要性

想象一下一个表单，允许用户输入数据。子组件负责管理表单，而父组件需要接收这些数据进行进一步处理。在这样的情况下，子组件需要一种方法来将数据更改传达给父组件，从而实现双向通信。

实现双向通信的方法

Vue.js 提供了多种实现双向通信的方法：

事件通信（emit 和 on）

子组件触发一个事件（使用 $emit），传递数据作为参数。
父组件监听该事件（使用 $on）并执行相应操作。

示例代码：

<!-- 子组件 -->
<input v-model="message">
<button @click="emitMessage">发送消息</button>

<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message', this.message)
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <message @message="receiveMessage"></message>
  <p>{{ message }}</p>
</template>

<script>
export default {
  methods: {
    receiveMessage(message) {
      this.message = message
    }
  }
}
</script>

双向绑定（props 和 v-model）

父组件将数据传递给子组件作为 props。
子组件使用 v-model 双向绑定数据，使其与父组件数据同步。

示例代码：

<!-- 子组件 -->
<input v-model="message">

<script>
export default {
  props: ['message']
}
</script>

<!-- 父组件 -->
<template>
  <message :message="message"></message>
  <p>{{ message }}</p>
</template>

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

自定义事件

子组件触发一个自定义事件（使用 $emit），传递数据作为参数。
父组件使用一个侦听器（v-on）来监听该事件并执行相应操作。

示例代码：

<!-- 子组件 -->
<button @click="emitCustomEvent">发送自定义事件</button>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', { message: 'Hello from child component!' })
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <message @custom-event="receiveCustomEvent"></message>
  <p>{{ message }}</p>
</template>

<script>
export default {
  methods: {
    receiveCustomEvent(event) {
      this.message = event.detail.message
    }
  }
}
</script>