vue2 与 vue3 之组件间数据双向绑定的区别

下面的文章中我对 vue2 和 vue3 中组件间数据双向绑定显示做了简单的说明，如果感觉看理论太枯燥的话，可以直接看代码实践，没有什么是比动手实践更有奇效的了。

---

1、vue2 中的组件间数据双向绑定

① 对 vue2 组件间数据双向绑定进行简单的说明

       在 Vue 2.0 发布后，开发者使用 v-model 指令时必须使用名为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop，就不得不使用 v-bind.sync。此外，由于v-model 和 value 之间的这种硬编码关系的原因，产生了如何处理原生元素和自定义元素的问题。

       在 Vue 2.2 中，引入了 model 组件选项，允许组件自定义用于 v-model 的 prop 和事件。但是，这仍然只允许在组件上使用一个 v-model。

       在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件：

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

       如果想要更改 prop 或事件名称，则需要在 ChildComponent 组件中添加 model 选项：

<!-- ParentComponent.vue -->

<ChildComponent v-model="pageTitle" />

// ---------------------------------------------------------------------------------------

<!-- ChildComponent.vue -->

export default {
   
  model: {
   
    prop: 'title',
    event: 'change'
  },
  props: {
   
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
   
      type: String,
      default: 'Default title'
    }
  }
}

       所以，在这个例子中 v-model 是以下的简写：

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

② v-bind.sync

       在某些情况下，我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此，官网建议使用 update:myPropName 抛出事件。例如，对于在上一个示例中带有 title prop 的 ChildComponent，可以通过下面的方式将分配新 value 的意图传达给父级：

this.$emit('update:title', newValue)

       然后父组件可以在需要时监听该事件，并更新本地的 data property。例如：

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

       为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：

<ChildComponent :title.sync="pageTitle" />

③ 上代码实践

Children.vue 子组件代码：
对下面子组件的一点注意事项做一个说明：