Vue 中 .sync 修饰符的作用是什么？

推荐答案

在 Vue 中，.sync 修饰符用于实现父子组件之间的双向绑定。它允许子组件修改父组件传递的 prop 值，从而简化了父子组件之间的数据同步。

本题详细解读

1. .sync 修饰符的基本用法

.sync 修饰符是 Vue 提供的一种语法糖，用于简化父子组件之间的双向绑定。通常情况下，Vue 推荐使用单向数据流，即父组件通过 props 向子组件传递数据，子组件通过事件向父组件传递修改后的数据。然而，在某些情况下，双向绑定可以简化代码逻辑。

使用 .sync 修饰符时，父组件可以通过 v-bind 绑定一个 prop，并在 prop 名后加上 .sync 修饰符。子组件可以通过 $emit 触发一个特定格式的事件来更新父组件的数据。

2. 示例代码

假设有一个父组件和一个子组件，父组件需要将 title 传递给子组件，并且子组件可以修改 title。

父组件代码：

// www.javascriptcn.com code example
<template>
  <div>
    <ChildComponent :title.sync="pageTitle" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      pageTitle: 'Hello, Vue!',
    };
  },
};
</script>

子组件代码：

// www.javascriptcn.com code example
<template>
  <div>
    <input v-model="localTitle" @input="updateTitle" />
  </div>
</template>

<script>
export default {
  props: ['title'],
  data() {
    return {
      localTitle: this.title,
    };
  },
  methods: {
    updateTitle() {
      this.$emit('update:title', this.localTitle);
    },
  },
};
</script>

3. 工作原理

• 父组件通过 :title.sync="pageTitle" 将 pageTitle 绑定到子组件的 title prop，并监听 update:title 事件。
• 子组件通过 v-model 绑定 localTitle，并在输入框内容变化时触发 updateTitle 方法。
• updateTitle 方法通过 this.$emit('update:title', this.localTitle) 触发 update:title 事件，将新的 title 值传递给父组件。
• 父组件接收到事件后，更新 pageTitle 的值，从而实现双向绑定。

4. 注意事项

• .sync 修饰符是 Vue 2.3.0+ 引入的特性，Vue 3 中仍然支持。
• 使用 .sync 修饰符时，子组件需要触发 update:propName 事件来更新父组件的数据。
• .sync 修饰符可以简化代码，但在复杂场景下，建议仍然遵循单向数据流的原则，以避免数据流混乱。