关于vue中.sync修饰符和自定义v-model的使用记录

最新推荐文章于 2023-04-03 11:31:01 发布
VIP文章 最新推荐文章于 2023-04-03 11:31:01 发布
阅读量440 收藏
点赞数 1
分类专栏： vue 随笔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36355178/article/details/88735432
版权

使用场景

工作中遇到的问题,需要在拖动时修改数据,或者在手动在Input标签中输入数字时改变进度条,效果图如下.在这里插入图片描述
这是2只球队在一场比赛中的一些数据对比情况,这个控件可以使用element-ui中的slider滑块组件,但是使用之后发现不支持从右边开始(0在右边)往左边滑动(100在左边)的功能参数,试了很久也没有找到,只能自己百度然后写了一个类似的但是没有在进度条上点击跳到指定地方的功能.
这里的这个拖拽框是一个组件,当页面第一次刷新的时候请求后台获取到数据,父组件将数据通过props的方式传值给这个拖拽组件,组件接收到了之后使用v-model绑定在input和进度条上进行事件修改值的操作.

需求:当用户操作完进度条或者在输入框进行加减或者输入完毕后将值回传给父组件

问题:有2个球队,如何知道修改的是哪只球队的数据,并将数据写入回对应的属性中?

在没有使用v-model和.sync 修饰符时我的解决方案是:
在渲染组件传值的时候手动写入一个字符串用来区分球队,再分别传入对应的组件的键和值,当拖拽事件结束后或输入事件结束后将 改变的值和2个参数传回给父组件(球队区分,键名),通过父组件的方法再将对应的值写入.
虽然可以实现,但是不利于维护

那么父子组件的值能否双向绑定起来,就可以省略了上面那么多步骤了

通过百度和官网API,发现可以通过自定义v-model实现单个属性的值双向绑定,而.sync修饰符可以传递一个双向绑定的对象

实现代码:

父组件中的写法
<myslider :num.sync="Home.AnalysisData[index]" :min=0 :max=100 :direction="'right'"><
最低0.47元/天 解锁文章
mk1105
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解VUE自定义组件中用.sync修饰符与v-model的区别
08-27
主要介绍了详解VUE自定义组件中用.sync修饰符与v-model的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2 自定义事件 v-model .sync
ME_GIRL的博客
04-19 1110
vue-将原生事件绑定到组件 <div id="app"> <base-input v-on:focus="onFocus" v-model="message" label="姓名"></base-input> </div> <script> Vue.component('base-input', { inheritAttrs: false, prop
vue v-model与.sync详解
small_cutey的博客
09-15 1814
vue v-model与.sync详解
Vue--.sync--使用/教程/实例
IT利刃出鞘的博客
01-19 1225
本文用示例介绍vue的.sync的用法。
vue 中 v-model .sync 双向数据绑定
boyikenan123的博客
04-25 433
数据绑定原理 数据绑定的几种形式 数据绑定的实现
vue的.sync修饰符用法及原理详解
热门推荐
winxin_58206976的博客
11-17 1万+
vue .sync的历史 vue .sync 修饰符最初存在于 vue 1.0 版本里，但是在 2.0 中被移除了。但是在 2.0 发布之后的实际应用中，vue 官方发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。开发者需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起官方重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。 vue 修饰符sync的功能是：当一个子组件改变了一个 pro
如何理解Vue的.sync修饰符的使用
12-29
本文介绍了Vue的.sync修饰符的使用，分享给大家，也给自己留个笔记 案例 <div>{{bar}} <my foo.sync=bar> <!-- <my foo=bar update:foo=val> bar = val></my> --> [removed] Vue.component('my-comp',...
浅析Vue.js中v-bind v-model的使用和区别
10-17
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定。这篇文章主要介绍了Vue.js中v-bind v-model的使用和区别,需要的朋友可以参考下
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
10-15
主要介绍了Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中 .sync 修饰符和v-model
weixin_43597801的博客
04-03 623
父组件将 message 的值传给子组件的，子组件中触发事件 update:xxx 需要修改父组件的 message，就可以用 .sync 修饰符简化( sync 操作符的时候。
Vue 自定义组件的 v-model 和 .sync 修饰符
皮蛋很白的博客
08-21 1003
Vue 自定义组件的 v-model Vue 组件的提供 model 选项自定义组件的 v-model 属性。 model 选项的值是一个对象，包含两个参数： prop - [String] 一个属性名 这个属性需要在 props 中声明 v-model 会传入这个属性 event - [String] 一个当前组件的自定义事件名 model 可以监听这个事件 当事件触发（$emit）时，将 v-model 的属性值修改为事件传入的值 相当于父级使用组件时默认绑定了事件处理函数修改v-model传
VUE中 .sync 修饰符 和 v-model区别
Grey的博客
10-17 1793
..
v-model 和 .sync 的区别和实现
qq_42396813的博客
10-09 230
数据双向绑定v-model和.sync
Vue中v-model和sync的解析
qq_40566547的博客
12-22 1418
前言 Vue中v-model和sync一样都是实现双向绑定的语法糖，可以让开发者少些一些代码，两者编译后都会产生一个属性和一个事件，不过两者规则不大一样。 sync sync实现双向绑定主要用于子组件修改父组件的数据的一种便捷操作，常用于分页器等组件。要想使用sync，子组件需要有如下规则： 要想使用sync作为数据的双向绑定的修饰符，子组件必须向外抛出的时间满足规则：$emit(“update:{propName}”, {newValue})，其中propName是修改的prop名字，newValue是传
Vue中从v-model，model，.sync到双向数据传递，再到双向数据绑定
爪哇犀牛
09-14 1万+
前面的话 虽然v-model和.sync之间的区别，是非常明显的，但是通过这个去研究下去，就有点意思了。首先说明v-model是.sync的一种特殊情况，也就是当prop是value，vm.$emit('update:input')，这个时候就是传统意义上的v-model，也就是说v-model是model为prop等于value，event为input的特殊情况。 概念 双向数据传递 为...
你确定你知道语法糖v-model .sync之间的区别吗？
m0_59078472的博客
08-12 237
1. v-model作用: v-model本质上是一个语法糖，v-model用于父子组件之间相互通信的一种方法 ,如果用传统的通过在子组件中的this.$emit通知父组件去$on去监听这个事件会很麻烦,v-model相对于更便捷一些 2. v-model原理:<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对<input>输入事..
.sync 修饰符
zedwar的博客
06-26 116
vue.sync修饰符官方文档解释如下： 里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。 举个例子看看： <template>
Vue数据双向绑定.sync 和v-model
彭世瑜的博客
11-04 3855
结论： .sync 和v-model两者的本质都是语法糖， 目的都是实现组件与外部数据的双向绑定。 v-model 是 .sync的一种体现。.sync 比较灵活;v-model较单一 .sync修饰符 父组件 <comp :foo.sync="bar" ></comp> // 等价于, 组件属性名称一致 <comp :foo="bar" @update:foot=...
vue中.sync修饰符
最新发布
08-23
在 Vue 中，.sync 是一个语法糖，它能够简化父子组件之间的数据传递。.sync 修饰符实际上是一个双向绑定的简写形式，它会自动创建一个名为 update:propName 的自定义事件，并且在父组件中监听这个事件，然后更新子组件的数据。 例如，在父组件中使用子组件时，可以通过 v-bind.sync 修饰符将父组件的数据与子组件的数据绑定在一起： ``` <template> <ChildComponent :message.sync="messageFromParent"></ChildComponent> </template> ``` 这里的 .sync 修饰符会自动将子组件的 message 属性与父组件的 messageFromParent 属性进行双向绑定，并且在父组件中监听名为 update:message 的自定义事件，以更新父组件的数据。 ``` <template> <ChildComponent :message.sync="messageFromParent"></ChildComponent> <button @click="updateMessage">Update Message</button> </template> <script> export default { data() { return { messageFromParent: 'Hello World' } }, methods: { updateMessage() { this.messageFromParent = 'Hello Vue' } } } </script> ``` 在子组件中，可以通过 $emit() 方法触发 update:message 事件，以更新父组件的数据。 ``` <template> <div> <input type="text" v-model="message"> <button @click="$emit('update:message', message)">Update Message</button> </div> </template> <script> export default { props: { message: { type: String } } } </script> ``` 这样，父组件和子组件之间就可以通过 .sync 修饰符实现双向数据绑定了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值