V-model and.sync in Vue

The similarities and differences between sync and V-Model are

Similarities: both are syntactic sugar, and both can realize two-way communication of data in parent and child components.

Differences: Different formats.

Sync =”num” V-model: @input + value :num. Sync: @update:num V-model can be used only once. .sync can have more than one. Sync binds the custom attribute a to a custom event @upadte:a

The parent component < template ><div>
    <MyCom :a.sync='num'/>
    // <MyCom :a='num' @upadte:a='val=>num=val'/>
  </div>
</template>
<script>
import MyCom from './MyCom.vue'
export default{
    compontents:{MyCom},
    data(){
     return {
        num:100}},methods: {f(){
    alert('f')}}}</script>Subcomponents < MyCom ><template>
<div>Custom Components<button @click='$emit('update:a',a=1)'>+ 1</button>
</div>
</template>
<script>
export default {
    props: {
    a: {type:Number.required:true}}}</script>The V-model is equivalent to binding custom attributes value and input eventsCopy the code

The parent component < template ><div>
    <MyCom v-model='num'/>
    // <MyCom :value='num' @input='val=>num=val'/>
  </div>
</template>
<script>
import MyCom from './MyCom.vue'
export default{
    compontents:{MyCom},
    data(){
     return {
        num:100}},methods: {f(){
    alert('f')}}}</script>Subcomponents < MyCom ><template>
<div>Custom Components<button @click='$emit('input',value=1)'>+ 1</button>
</div>
</template>
<script>
export default {
    props: {
    value: {type:Number.required:true}}}</script>
Copy the code