极速上手 VUE 3—v-model 的使用变化，深入剖析

子组件代码

{ {msg}}

props 是单向数据流，子组件只能读取，并不能修改 msg 。对象类型可以，但不建议修改。

1.2、父子组件双向绑定

子组件同步一个数据的时候，子组件既要使用，还要修改这个数据，以前需要通过 props Down 和 Events Up 来实现。现为了方便，提供了特殊的语法糖 v-model 。

父组件代码：

{ {msg}}

子组件 SetInput.vue 文件代码

v-model = “msg” 可以翻译为：

:value=“msg”

@input=“msg=$events”

所以父组件的代码可以翻译为：

<set-input :value=“msg” @input=“msg=$events” />

在一个组件上，v-model 只能使用一次，如果想要对多个数据同步绑定，则可以使用.sync修饰符。

二、.sync修饰符

---

.sync 和 v-model 都是语法糖，本质还是父子组件间的通信。使用 .sync 修饰符实现父子组件多个数据双向绑定。

因为 vue2 中组件只能定义一个 v-model，如果父子需要实现多个数据双向绑定，就需要借助 .sync 修饰符。

.sync 使用原理：

//可翻译为

<child-comp

:value=“msg” @input=“msg=$event”

:foo=