个人网站程序下载外链网站推荐
我们在日常开发的过程中,v-model指令可谓是随处可见,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖。但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符。在这里就两者的使用进行一下比较和总结:
一、v-model
v-model的本质上来说,是一个语法糖
目前咱们习惯性的写法是这样的:
<input v-model="val" type="text">但是实质上的完整写法是这样的:
<input :value="val" @input="val=$event.target.value" /> 也可以将@input后面写成一个函数,然后在methods中进行赋值操作。
要理解这行代码，首先我们要知道 input 元素本身有个input 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 input 事件，把最新的value值传给传递给val ,完成双向数据绑定的效果 。
注意: 不是所有能进行双向绑定的元素都是input事件。可以查看我的另一篇单独介绍自定义组件的v-model的文章
↓↓↓↓↓↓↓↓↓↓
自定义子组件的v-model-CSDN博客
二、.sync修饰符
1.作用：.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
2.本质：
// 正常父传子：
<son :a="num" :b="num2"></son>
// 加上sync之后父传子：
<son :a.sync="num" .b.sync="num2"></son>
// 它等价于
<son:a="num" @update:a="val=>num=val":b="num2" @update:b="val=>num2=val"></son>
// 相当于多了一个事件监听，事件名是update:a；
// 回调函数中，会把接收到的值赋值给属性绑定的数据项中。
注意：这里面的传值与接收与正常的父向子传值没有区别,唯一的区别在于往回传值的时候$emit所调用的事件名必须是update:属性名 ,事件名写错不会报错,但是也不会有任何的改变,这点需要多注意。
三、例举与总结
同样实现父子组件双向数据传递：
1.使用自定义v-model
父组件中
<template><div>父组件{{ sonData }}<Son v-model="sonData"/><el-input v-model="sonData" clearable maxlength="200" /></div>
</template><script>
import Son from './son'
export default {name: 'Father',components: {Son},data() {return {sonData: '2'}}
}
</script>
子组件
<template><div>子组件{{ value }}<el-input v-model="val1ue" clearable maxlength="200" @change="change" /></div>
</template><script>
export default {name: 'Son',model: {prop: 'val1ue', // 父组件的v-model所绑定的值是这里的prop的属性值对应的props中的值event: 'change' // 定义通过$emit去调用的父组件的事件，在父组件的v-model改变时则会安装这个方法去处理},props: {value: String // 接受父组件传递的v-model后面值的类型,必须在此注册不然没法使用},methods: {change() {this.$emit('change', this.val1ue)}}
}
</script>
2.使用.sync
父组件中
<template><div>父组件{{ sonData }}<Son :value.sync="sonData" /> //通过.sync给value属性绑定属性值为sonData//在这里绑定一个v-model从而测试在父组件中改变时，是否传递到了子组件<el-input v-model="sonData" clearable maxlength="200" /></div>
</template><script>
import Son from './son'
export default {name: 'Father',components: {Son},data() {return {sonData: '2'}}
}
</script>
子组件中
<template><div>子组件{{ value }}<el-input v-model="value" clearable maxlength="200" @input="change" /></div>
</template>
<script>
export default {name: 'Son',props: {value: String //接收父组件传递的参数},methods: {change() {//这里需要注意一定得是 update:接收的参数名 this.$emit('update:value', this.value)}}
}
</script>