v-model 和.sync 功能和区别

最新推荐文章于 2024-04-15 16:40:42 发布

Sisyphus丶

最新推荐文章于 2024-04-15 16:40:42 发布

阅读量514

点赞数 1

分类专栏：我是菜鸟

本文链接：https://blog.csdn.net/ssk524/article/details/119732994

版权

我是菜鸟专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中的v-model和.sync修饰符，v-model主要用于表单组件的数据双向绑定，而.sync则用于父子组件间的属性双向绑定。v-model在子组件中相当于.input事件，但只适用于一个属性，而.sync可以用于多个属性。通过this.$emit('update:foo', newValue)子组件可以通知父组件更新属性值。

摘要由CSDN通过智能技术生成

v-model

vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

<input v-model="val" />

v-model是vue提供的一个语法糖，本质上是

<input :value="msg" @input="(val)=>this.msg=val" />

data(){

    return:{
        
        msg:''
    
    }
}

.sync

官方推荐使用一种update:my-prop-name 的模式来替代事件触发，实现父子组件间的双向绑定。

<Children :foo.sync="bar"></Children >

本质原理：

<Children :foo="bar" @update:foo="val => bar = val"></Children >

在子组件如何更新自定义属性prop的值

this.$emit('update:foo', newValue)

通过$emit 触发父组件原理函数，传入要更新的值

v-model和.sync的区别

v-model默认对应的是input或者textarea等表单组件的input事件，如果在子组件使用input事件，其和.sync修饰符功能一模一样。但是比较单一，不能多个绑定。一个组件可以多个绑定属性用.sync修饰符，可以同时"双向绑定多个“prop”，而并不像v-model那样，一个组件只能有一个。