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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

使用场景

工作中遇到的问题,需要在拖动时修改数据,或者在手动在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'"></myslider>

这里是通过v-for 循环生成的子组件,部分代码不截取,[index]值是:Home 球队中的AnalysisData的某个属性, :num是传递给子组件

子组件接收父组件传过来的值
'myslider': {
            template: "#myslideryes",
            props: {
                num: '', //父组件传进来的值
                min: '',
                max: '',
                direction: '',
            },

现在可以在子组件操作事件完毕后将值传回

因为是原生事件的关系,我这里 var _this=this 获取到vm对象
document.onmouseup = function () {
                        _this.$emit('update:num', _this.per);
                        document.onmousemove = document.onmouseup = null;
                    }

回传的写法如上

重点在于:this.$emit(‘update:num’, this.per)

回传依然需要使用 this.$emit 方法

参数:this.$emit(‘update:num’, this.per) update:是固定写法,num是在父组件传值的时候要对应名称,this.per是要修改好了要传回去给父组件的值.

父组件中无需其他操作就可以看到值已经被改变了

操作前

操作后


更多细节请看官网,还有很多坑 手动 滑稽

使用自定义 v-model 进行父子组件值的双向绑定

自定义v-model时需要记住:

1.

父组件上写法 v-model绑定要传的值
<myslider v-model="Home.AnalysisData[index]" :min=0 :max=100 :direction="'right'"></myslider>

components: {
					'myslider': {
						template: "#myslideryes",
						model:{ //新增一个model对象,属性是有2个
							prop:'num',//这个是父组件传进来的值传到子组件的props上
							event:'parent-event' //这个是要回传时父组件监听 parent-event 事件
						},
						props: {
							num: '', //子组件进行接收父组件传进来的值
							min: '',
							max: '',
							direction: '',
						},

注意:使用新增model对象进行接收父组件传的值到子组件身上的props中对应的属性上.
注意:在model对象中的event属性上需要指定父组件监听的事件,回传时需要调用的

3.

回传方法

document.onmouseup = function() {
			_this.$emit('parent-event', _this.per);
			document.onmousemove = document.onmouseup = null;
		}

_this.$emit('parent-event', _this.per);这里用了原生事件所以用了_this,

== 回传仍然需要使用 $emit==

第一个参数是父组件监听的事件名

第二个参数是需要传的值

使用v-model 操作前:

操作后

到此结束之前遇到不使用 $emit回传的 也会修改父组件的值,有空了再把文章整理出来.加油!

以上是 关于vue中.sync修饰符和自定义v-model的使用记录 的全部内容， 来源链接： utcz.com/z/376469.html

回到顶部