v-model和.sync修饰符的区别(面试重点)

(图片来源于网络,如侵删)

v-model实现自定义组件的双向数据绑定

v-model的原理

<son v-model="num" > </son>

等价于

<son :value="num" @input="(val)=>{return this.num=val}" >

示例代码

在father组件中

<template>
  <div>
    <son v-model="num" />
  </div>
</template>

<script>
import son from './son.vue'
export default {
  components: {
    son
  },
  data() {
    return {
      num: 1
    }
  }
}
</script>

在son组件中

<template>
  <div>
  <span>{{ value }}</span>   // 此处显示为100
    <button @click="change">改变num</button>
  </div>
</template>

<script>
export default {
props: {
value:{
type: Number,
required: true
}
},
  methods: {
    change() {
      this.$emit('input', 100)
    }
  }
}
</script>

注:v-model在一个子组件只能用一次

.sync实现自定义组件的双向数据绑定

.sync的原理

<son :a="name" :b="num"></son> // 正常的父向子传值

<son :a.sync="name" :b.sync="num"></son>// 使用.sync修饰的父向子传值

等价于

<son :a="name" @update:a="(val)=>{return this.name=val }"

:b="num" @update:b="(val)=>{return this.num=val }" ></son>

// 相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

<template>
  <div>
    <son :a.sync="name" :b.sync="num" >\</son>
  </div>
</template>

<script>
import son from './son.vue'
export default {
  components: {
    son
  },
  data() {
    return {
      name: '小明同学',
      num: 1
    }
  }
}
</script>

在son组件中

<template>
  <div>
  <span>{{ name }}----{{ num }}</span>   // 此处显示为100
    <button @click="change">改变name和num</button>
  </div>
</template>

<script>
export default {
props: {
a:{
type: String,
required: true
},
b:{
type: Number,
required: true
}
},
  methods: {
    change() {
      this.$emit('update:a', '大明同学')
      this.$emit('update:b', 100)
    }
  }
}
</script>

注:.sync在一个子组件可以使用多次

小结

• 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。

• 异同点：

  • 格式不同。 v-model="num", :num.sync="num"
  • v-model： @input + :value="num"
  • :num.sync: @update:a + :a="num"
  • v-model 只能用一次; .sync可以有多个

最后

希望整理的信息对您有所帮助,喜欢的话请帮忙点赞

如果有什么建议,欢迎在评论区留言

不足之处还请批评指教,谢谢!