v-model和.sync的对比
共同点:
两者都是语法糖
两者都可以实现父子组件的双向绑定
不同点:
v-model
- 父组件 v-model=子组件 @input+:value
- 一个组件只能绑定一个v-model
- v-model针对更多的是最终操作结果,是双向绑定的结果,是value,是一种change的操作
.sync
- 父组件 事件名, 子组件@updata:事件名,以这种模式触发父子间的双向绑定
- 一个组件可以有多个属性用.sync修饰,可以同时双向绑定多个"prop"
- sync针对的更多是各种状态,是状态的传递,是status,是一种updata操作
v-model
作用:进行表单元素的数据双向绑定的
本质:语法糖
业务场景
如果我们需要父子间数据的双向绑定,我们可以怎么做呢? 可以用v-model
子组件接受并展示父组件数据
那么,子组件能直接修改父组件数据吗?能修改,但不允许,vue会报错,但是页面能显示出来
那么,怎么才能既能读取数据又能修改数据呢?
可以通过事件传参通知父组件更新的形式来修改数据
.sync修饰符
作用.sync修饰符能实现子组件与父组件的双向绑定，并可以实现子组件同步修改父组件的值。 语法糖写法
完整写法
