!
也想出现在这里? 联系我们
广告位
当前位置:首页>运营>网站运维>vue修饰符v-model及.sync原理及区别详解(vue v—model原理)

vue修饰符v-model及.sync原理及区别详解(vue v—model原理)

这篇文章主要为大家介绍了vue修饰符v-model及.sync原理及使用区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助!

vue修饰符v-model及.sync原理及区别详解(vue v—model原理)

v-model的原理

v-model的本质,其实就是:value@input事件的语法糖

父组件通过向子组件传值和自定义事件,子组件里面通过$emit去触发input事件

注意点: 在子组件中 这个input事件是自定义事件

.sync的原理


两者本质都是一样,并没有任何区别: “监听一个触发事件”=\"(val) => value = val\"。

v-model和.sync修饰符的区别

.sync与v-model区别是

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

区别点:

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

只不过v-model默认对应的是input或者textarea等组件的input事件,如果在子组件替换这个input事件,其本质和.sync修饰符一模一样。比较单一,不能有多个。

一个组件可以多个属性用.sync修饰符,可以同时\"双向绑定多个“prop”,而并不像v-model那样,一个组件只能有一个。

因为使用v-model,子组件中只能触发一个input事件,事件名是唯一的,而.sync修饰符,它触发的时间名是updata:属性名,所以它有多个事件名,就可以使用多次

总结作用场景:

props/$emit是父子组件最常用的通信方式,而v-model、.sync只是其语法糖子组件只是单一的修改某个父组件值的话,表单类组件使用v-model语法糖子组件只是单一的修改某个父组件值的话,非表单类组件使用sync语法糖复杂逻辑还是老老实实props/$emit

其实语法糖只是在父组件用的时候更加方便,而子组件该咋样还是咋样。

给TA打赏
共{{data.count}}人
人已打赏
网站运维

JS实现Tab栏切换的两种方式案例详解(tab栏切换代码)

2022-9-6 14:31:24

网站运维

zblog实现统计网站最近24小时发布文章的数量

2022-9-6 14:32:02

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 [email protected] 或点击右侧 私信:林沐阳 反馈,我们将尽快处理。
{{yiyan[0].hitokoto}}
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索