组件使用v-model、$listeners、.sync(区别于v-model的双向数据绑定)
自定义组件
自定义组件的v-model
首先我们先说一下在自定义组件中使用v-model的必要条件
- 在自定义的组件中要有input(这里我们先不讨论单选复选框)
- 在自定义组件的模板对象中要有props属性,且里面要含有一个value
- 在自定义组件的input标签上要绑定value属性值为props中传入的值,且还需要发出一个input事件
这样讲可能会有点难理解,还是上代码吧...
<div id="app">
<child-com v-model="message"></child-com>
<span>{{ message }}</span>
</div>
<template id="childCom">
<div>
<input type="text" :value="value" @input='inputEvent'>
</div>
</template> <script>
const childCom = {
template: '#childCom',
props: ['value'],
methods: {
inputEvent(event) {
this.$emit('aaa', event.target.value)
}
},
} const vm = new Vue({
el: '#app',
data: {
message: '可以双向绑定的了'
},
components: {
childCom
}
})
</script>
这是最终实现效果需要必备的,看完这些代码如果你是小白,你可能会有点不理解为什么要这样做,下面我告诉你原理。
首先在我们使用的
v-model
中,其内部实现的原理就是一个 value属性和一个input事件,其主要步骤就是,用v-bind绑定value,然后用input事件监听值的变化,当文本框中的值发生变化的时候,input事件就会触发,那么我们可以在input事件中获取到改变后的值然后赋值给value,这样是不是就完成了双向数据绑定了。上代码:<div id="app">
<input type='text' :value='message' @input='inputEvent'>
<span>{{ message }}</span>
</div> <script>
const vm = new Vue({
el: '#app',
data: {
message: '可以双向绑定的了'
},
methods: {
inputEvent(event) {
this.message = event.target.value;
}
}
})
</script>
就这样几个步骤,就达到了v-model的效果了,这就是他的原理,然后让我们深一步想,让自定义组件使用双向数据绑定。因为我们知道其内部就是value和input事件,
所以有了如下代码:
<div id="app">
<child-com :value='message' @input='message=$event'></child-com> <!-- 此代码就这里和最开始代码不同 -->
<span>{{ message }}</span>
</div> <template id="childCom">
<div>
<input type="text" :value="value" @input='inputEvent'>
</div>
</template> <script>
const childCom = {
template: '#childCom',
props: ['value'],
methods: {
inputEvent(event) {
this.$emit('input', event.target.value)
}
},
} const vm = new Vue({
el: '#app',
data: {
message: '可以双向绑定的了'
},
components: {
childCom
}
})
</script>
根据上面的原理,现在你应该知道了为什么要传一个value在子组件了吧,明白之后,您就可以把
<child-com :value='message' @input='message=$event'></child-com>
替换成<child-com v-model="message"></child-com>
了。$listeners的使用
由来:当我们在项目开发过程中会出现很多组件嵌套的关系,那么如果还要在最外层的组件向内部传递数据的话,有如下几种方式:
- 从父向子传递,子再向孙传递,一直传递下去,那么最里面的组件想往最外层传东西则可以从最里面向外面逐层$emit发送出去,但是仔细想想,一个简单的传递信息,却涉及到了这之间所有的组件,而他们只是一个中间者,这让代码维护起来非常困难
- 使用vuex来进行传递,这样确实方便了很多,但是这样做如果没有其他用处的话就有点大材小用了
- 使用事件总线,这样使用也不容易维护
而
$listeners
和$attrs
的出现,就完美的解决了第一种情况的发生<div id="app">
<child-com :name='name' :age='age' @test-listeners='testListeners'></child-com>
</div> <script>
const vm = new Vue({
el: '#app', // 父组件
data: {
name: 'lyl',
age: 20,
},
methods: {
testListeners(arg) {
console.log(arg)
}
},
components: {
childCom: { // 子组件
inheritAttrs: false,
template: `
<div>
<span> {{name}} </span>
<grand-com v-bind='$attrs' v-on='$listeners'></grand-com>
</div>
`,
props: ['name'],
components: {
grandCom: { // 孙子组件
inheritAttrs: false,
template: `
<div>
<span @click='listenClick'>{{$attrs.age}}</span>
</div>
`,
methods: {
listenClick() {
this.$emit('test-listeners','aaaaaaa');
}
},
}
}
}
}
})
</script>
上面代码中,孙子组件要发出一个是将让父组件调用,这个时候我们可以在中间过渡的子组件模板使用的孙子组件上绑定这个属性,即:
v-on='$listeners'
,这样一来父组件就能直接调用孙子组件发出的方法了,并且在中间层的子组件上并没有什么多余的部分.sync的使用方法
我们都知道,在一个组件上,我们只能使用一个v-model,但是如果我们的组件中有多个input标签呢,并且每个input标签中的值都不同,且每个都想进行双向绑定,这个时候,v-model就不行了。于是乎就出现了.sync的出现。
根据上面我说的那些需求,我们写一下代码:
- 不使用.sync的代码
<div id="app">
<child-com
:value='obj.value' @aaa='obj.value = $event'
:name='obj.name' @bbb='obj.name = $event'
:age='obj.age' @ccc='obj.age = $event'>
</child-com> <p>{{ obj }}</p>
<p>{{ obj.value }}</p>
<p>{{ obj.name }}</p>
<p>{{ obj.age }}</p>
</div> <!-- childCom组件的模板 -->
<template id="childCom">
<div>
<input type="text" :value="value" @input='inputValueEvent'>
<br>
<input type="text" :value="name" @input='inputNameEvent'>
<br>
<input type="text" :value="age" @input='inputAgeEvent'>
</div>
</template> <script>
const childCom = {
template: '#childCom',
props: ['value','name','age'],
methods: {
inputValueEvent(event) {
this.$emit('aaa', event.target.value)
},
inputNameEvent(event) {
this.$emit('bbb', event.target.value)
},
inputAgeEvent(event) {
this.$emit('ccc', event.target.value)
}
},
} const vm = new Vue({
el: '#app',
data: {
obj: { value: '双向绑定' , name: 'coderlyl' , age: 20}
},
components: {
childCom
}
})
</script>
根据上面的代码,我们不难发现,我们在标签中书写了过多的重复的东西,可读性也不是很好,下面我们再使用
.sync
的方式- 使用.sync的代码
<div id="app">
<child-com v-bind:value.sync='obj.value'
v-bind:name.sync="obj.name"
v-bind:age.sync="obj.age"> <!--这里也发生了变化-->
</child-com> <p>{{ obj }}</p>
<p>{{ obj.value }}</p>
<p>{{ obj.name }}</p>
<p>{{ obj.age }}</p>
</div>
<template id="childCom">
<div>
<input type="text" :value="value" @input='inputValueEvent'>
<br>
<input type="text" :value="name" @input='inputNameEvent'>
<br>
<input type="text" :value="age" @input='inputAgeEvent'>
</div>
</template> <script>
const childCom = {
template: '#childCom',
props: ['value','name','age'],
methods: {
inputValueEvent(event) {
this.$emit('update:value', event.target.value) // 这里发生了变化
},
inputNameEvent(event) {
this.$emit('update:name', event.target.value) // 这里发生了变化
},
inputAgeEvent(event) {
this.$emit('update:age', event.target.value) // 这里发生了变化
}
},
} const vm = new Vue({
el: '#app',
data: {
message: '可以双向绑定的了',
obj: { value: '双向绑定' , name: 'coderlyl' , age: 20}
},
components: {
childCom
}
})
</script>
也许看完这里,你并没有觉得好到哪里去了,下面还有更简单的写法
<child-com v-bind.sync="obj"></child-com>
<!-- 其他代码一样 -->
对,没错!这是终极简化版,但是这只针对于对象才能用
注意带有
.sync
修饰符的v-bind
不能和表达式一起使用 (例如v-bind:title.sync=”doc.title + ‘!’”
是无效的)。取而代之的是,你只能提供你想要绑定的属性名,类似v-model
。将
v-bind.sync
用在一个字面量的对象上,例如v-bind.sync=”{ title: doc.title }”
,是无法正常工作的,因为在解析一个像这样的复杂表达式的时候,有很多边缘情况需要考虑。
组件使用v-model、$listeners、.sync(区别于v-model的双向数据绑定)的更多相关文章
- vue中如何在自定义组件上使用v-model和.sync
自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model ...
- vue2组件之间双向数据绑定问题
最近在使用element-ui的dialog组件二次封装成独立组件使用时,子组件需要将关闭dialog状态返回给父组件,简单的说就是要实现父子组件之间的数据双向绑定问题. 大致代码如下: 1,父组件 ...
- SIP模块版本错误问题:the sip module implements API v??? but XXX module requires API v???
系统安装了python 2.7,继续安装PyQt4,于是依次下载sip.pyqt4源码进行安装.用以下代码测试: import PyQt4.QtGui 显示出错.错误信息:the sip module ...
- Angular自定义组件实现数据双向数据绑定
学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
- n维向量空间W中有子空间U,V,如果dim(U)=r dim(V)=n-r U交V !={0},那么U,V的任意2组基向量的组合必定线性相关
如题取U交V中的向量p (p!=0), 那么p可以由 U中的某一组基线性组合成(系数不全是零),同时,-p也可以由V中的某一组基线性组合成(系数不全为零) 考察p+(-p)=0 可知道,U中的这组基跟 ...
- angular4自定义组件非input元素实现ngModel双向数据绑定
在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... ...
- Angular:实现组件间双向数据绑定
学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么父子组件间能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...
- vue3.x自定义组件双向数据绑定v-model
vue2.x 语法 在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件: <ChildComponent v-model="pag ...
随机推荐
- HDU_3853_概率dp
http://acm.hdu.edu.cn/showproblem.php?pid=3853 又因为总期望为子期望的加权和,加权因子为子期望的转移概率,所以得到:dp[ i ][ j ]= p1 * ...
- c++利用初始化列表在类内部和类外部定义构造函数的区别
case 1:在类外定义构造函数,所有data member都在初始化列表中进行初始化. class SupportClass { public: SupportClass() { cout < ...
- gridFS-Nginx的安装与使用
在使用gridFs的nginx模块时,先确认好你的机器上已经安装好了mongo 首先通过git将最新的gridfs的nginx模块下载到本地 git clone https://github.com/ ...
- 本地开发环境伪装成SSL连接的实现
本地ssl开发测试实现1,在外网服务器上使用测试域名和t.test.cn,用let's encrypt申请 证书并正常运行2,修改本地服务器host文件,将t.kennylee.vip指向127.0. ...
- java 获取两个时间之前所有的日期
正序(2017-01-01 ~2019-xxxxx) package com.founder.util; import java.text.SimpleDateFormat; import java. ...
- Linux Shell 计算脚本执行过程用了多长时间
#!/bin/bash starttime=`date +'%Y-%m-%d %H:%M:%S'` #执行程序 endtime=`date +'%Y-%m-%d %H:%M:%S'`start_sec ...
- ubuntu python及python IDLE 的安装
ubuntu下Python的安装和使用 文章参考出处:https://www.cnblogs.com/luckyalan/p/6703590.html ubuntu14.04 安装Python2.7: ...
- [jQuery]jQuery和DOM对象(三)
iQuery和DOM对象 用原生js获取来的对象就是DOM对象 // 1. DOM对象 var myDiv = document.get.querySelector('div'); // myDiv ...
- ModbusTCP协议解析 —— 利用Wireshark对报文逐字节进行解析详细解析Modbus所含功能码
现在网上有很多类似的文章.其实这一篇也借鉴了很多其他博主的文章. 写这篇文章的重点是在于解析功能和报文.对Modbus这个协议并不会做很多介绍. 好了,我们开始吧. 常用的功能码其实也没多少.我也就按 ...
- leaflet结合turf.js实现多边形分割(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...