vue v-model与.sync详解
原创
用过vue的小伙伴应该都知道，使用表单绑定值的时候，我们通常会用到一个 v-model 指令，它可以在表单以及元素上面创建双向数据绑定
1、但是其实 v-model是一个语法糖，它真的是实现是这样的：
<input v-model="val" type="text">
// 本质：
<input :value="val" @input="val=$event.target.value" />要理解这行代码，首先你要知道 input 元素本身有个input 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 input 事件，把最新的value值传给传递给val ,完成双向数据绑定的效果 。
2、相信用 v-mode 绑定绑定表单，大家都非常熟悉，但是 v-model 还有一个作用，可以用于父子组件之间数据的双向绑定。
// parent组件，也就是我们的父组件
<template>
<div>
<son v-model="name"/>
</div>
</template>
<script>
import son from './son.vue'
export default {
components: {son},
data() {
return {
name:"旺柴"
}
}
}
</script>// son 组件，也就是我们的子组件
<template>
<div>
{{ value }}
// 父组件绑定的v-model的值
</div>
</template>
<script>
export default {
// 这里必须用value名称，换成其他的无效
props: {
value: {
type:String,
required: true
}
}
}
</script>但是有一点需要注意：由于vue是单向数据流的，所以我们不能子组件中直接修改value值，根据我们的经验，一般我们会通过在子组件中使用$emit('自定义事件名',值)的方法将值传入父组件。
但是这里不能这样做，因为是使用v-model绑定的值，我们要用@input事件进行修改
// 子组件中通过 $emit()方法，绑定一个input方法，注意，只能是input
<template>
<div>
<div @click="$emit('input',value+'汪汪汪')"></div>
</div>
</template>成功修改value的值
3、.sync修饰符作用
.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
不使用.sync的情况下是：
// 父组件：
<template>
<div>
<my-son :name="name" @changeName='changeName' />
</div>
</template>
<script>
import mySon from "./components/mySon.vue"
export default {
components: {
mySon
},
data () {
return {
name: '旺柴'
};
},
methods: {
changeName (value) {
this.name = this.name + value
}
},
}
</script>
// 子组件
<template>
<div @click='changeName'>
{{name}}
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ''
}
},
methods: {
changeName () {
this.$emit('changeName', '汪汪汪')
}
},
}
</script>使用 .async
// 父组件
<template>
<div>
<my-son :name.sync="name" />
</div>
</template>
<script>
import mySon from "./components/mySon.vue"
export default {
components: {
mySon
},
data () {
return {
name: '旺柴'
};
},
}
</script>
// 子组件
<template>
<div @click='changeName'>
{{name}}
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ''
}
},
methods: {
changeName () {
this.$emit('update:name', this.name + '汪汪汪')
}
},
}
</script>区别在于往回传值的时候. async 的 $emit所调用的事件名必须是update:属性名。
4、.sync与v-model区别：
相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
区别点：
格式不同。 v-model=“num”, :num.sync=“num”
v-model： @input + value
:num.sync: @update:num
v-model只能用一次；.sync可以有多个。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
