Vue 中 .sync 修饰符：让组件与父组件数据双向绑定

前端

2023-11-01 07:11:35

Vue.js 提供了一种简单的方法让子组件与父组件的数据实现双向绑定，那就是使用 .sync 修饰符。通过这种机制，可以在不直接暴露内部状态的情况下，使数据在组件间流动。

原理概览

.sync 修饰符的核心功能是将子组件的 props 变量与父组件的数据进行同步更新。当子组件内的数据改变时，这些变化会自动反映到父组件上。反之亦然，父组件的数据变动也会传递给子组件。

使用场景

在构建复杂的 UI 应用中，.sync 特别有用。比如在一个包含多个表单字段的复杂表单场景下，使用 .sync 可以让每个字段组件自动同步其状态到主表单组件上，减少了手动管理状态传递的工作量。

实际操作示例

父组件定义与子组件通信

首先，在父组件中定义一个变量，并通过属性 prop.sync 传递给子组件。这使得子组件可以改变这个值时，也会影响到父组件中的原始数据。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <p>{{ message }}</p>
    <!-- 子组件中使用 .sync 进行双向绑定 -->
    <ChildComponent :message.sync="message"/>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

子组件接收并修改值

在子组件中，通过定义 props 来接收父组件传递的属性。为了支持 .sync 功能，需要使用 $emit 方法来触发更新事件。

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <!-- 使用 v-model 指令 -->
    <input :value="message" @input="$emit('update:message', $event.target.value)" />
  </div>
</template>

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