@PropSync 与 @VModel

标签：PropSync VModel 自定义 value prop Vue 组件 model

1. 原始文档

 

 

  2. 分析 

都可以用于修改组件中的props值，区别在于propSync要配合父组件.sync使用，VModel父组件使用时是v-model=""

在vue 2.x 里，使用 v-model 等同于向组件传递一个 value 属性，同时监听一个 input 事件

 3. vue2 到 vue3

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

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

在 Vue 3 中，双向数据绑定的 API 已经标准化，以减少开发者在使用 v-model 指令时的混淆，并且更加灵活

这些变化可以概括为：

• 破坏性的： 当用在 自定义组件 上的时候，v-model 的 prop 与 event 的默认名已变更：
  • prop: value -> modelValue；
  • event: input -> update:modelValue；
• 破坏性的： v-bind的 .sync 修饰符以及 model 选项已删除，取而代之的是 v-model 的一个参数；
• 新的： 现在可以在一个组件上使用多个 v-model 来绑定数据了；
• 新的： 新增了自定义 v-model 修饰符的功能。

详情参考下面的文章，迁移前后写法写的很详细：

从Vue 2到Vue 3的迁移指南之破坏性特性（三、v-model）

4.传值是数组时子组件修改props没有报错

 传进来的list是个数组，属于引用类型，修改子组件相当于把父组件也同时修改了，所以没有报错，如果是个基本类型的数据直接修改那么vue会报错。

 

标签：PropSync,VModel,自定义,value,prop,Vue,组件,model
From： https://www.cnblogs.com/xinxinzh/p/16501664.html