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

推荐答案

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

本题详细解读

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

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

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

2. 示例代码

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

父组件代码：

-- -------------------- ---- -------
----------
  -----
    --------------- ----------------------- --
  ------
-----------

--------
------ -------------- ---- -----------------------

------ ------- -
  ----------- -
    ---------------
  --
  ------ -
    ------ -
      ---------- ------- ------
    --
  --
--
---------

子组件代码：

-- -------------------- ---- -------
----------
  -----
    ------ -------------------- -------------------- --
  ------
-----------

--------
------ ------- -
  ------ ----------
  ------ -
    ------ -
      ----------- -----------
    --
  --
  -------- -
    ------------- -
      -------------------------- -----------------
    --
  --
--
---------

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 修饰符可以简化代码，但在复杂场景下，建议仍然遵循单向数据流的原则，以避免数据流混乱。