左小白的技术日常
Github
2020/08/15
Author: guoqzuo

vue中v-model与.sync的区别

一般父组件给子组件传值是单向的,对于非引用类型,子组件怎么修改父组件传给子组件prop对应的值呢?除了通过 $parent、$root、Bus(发布,订阅)、状态管理(vuex)、额外定义一个方法外,还有两种方法:使用 v-model,或者为加.sync,来看下对比

先来看v-model

<my-div v-model="someValue" />
<!-- 等价于 -->
<my-div :value="someValue" @input="someValue = $event">

<script>
  // this.$emit('input', '修改somevalue的值为这里的值')
</script>

再来看.sync

<my-div :someValue.sync="doc.title" />
<!-- 等价于 -->
<my-div :someValue="doc.title" @update:someValue="doc.title = $event" />


<script>
  // this.$emit('update:someValue', '修改somevalue的值为这里的值')
</script>

两者的区别:

参考: