vue 双向绑定(v-model 双向绑定、.sync 双向绑定、.sync 传对象)
1. v-model
实现自定义组件双向绑定
v-model
其实是个语法糖,如果没按照相应的规范定义组件,直接写v-model
是不会生效的。再说一遍,类似于v-on:click
可以简写成@click
,v-model
是两个表达式合在一起的简写。记住这个,下面具体说明。
1.1 input
双向绑定
子组件MyInput.vue
:
<template>
<div>输入
<input :value="value" @input="input"/>
</div>
</template>
<script>
export default {
name: "MyInput",
props: {
value: {type: [String, Number]}
},
methods: {
input(e) {
this.$emit('input', e.target.value)
}
}
}
</script>
父组件App.vue
中使用:
<template>
<div id="app">
<my-input v-model="haha" />
<div>{{haha}}</div>
</div>
</template>
<script>
import MyInput from '@/components/MyInput'
export default {
name: 'App',
components: { MyInput },
data() {
return {
haha: '66666',
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<my-input v-model="haha" />
是一个语法糖(简写),它相当于:
<my-input
:value="haha"
@input="onInput"
/>
onInput(e) {
this.haha = e
}
两者效果一样,
v-model
减少了很多代码,不用你手动把传过来的值赋值给haha
了,少定义了一个方法。作用还是挺明显的。
MyInput
组件中的value
不可以叫别的名字,$emit
中抛出的方法也只能叫input
,否则都不可以用v-model
语法糖,用了也没啥效果。
另外,获取 input 输入值的的方式是:$event.target.value
,写成方法的话,$event
实参省略了。
1.2. checkbox
双向绑定
到了checkbox
这,又有点不一样,首先,它绑定的值不叫value
,触发事件也不叫input
,具体看代码。
子组件MyCheckBox
代码:
<template>
<div>
<input type="checkbox" :checked="checked" @change="change"/>
</div>
</template>
<script>
export default {
name: "MyCheckBox",
model: {
prop: 'checked',
event: 'zhuangbi'
},
props: {
checked: Boolean
},
methods: {
change(e) {
this.$emit('zhuangbi', e.target.checked)
}
}
}
</script>
父组件App.vue
中使用:
<template>
<div id="app">
<my-check-box v-model="changeV"></my-check-box>
<div>{{changeV}}</div>
</div>
</template>
<script>
import MyCheckBox from '@/components/MyCheckBox'
export default {
name: 'App',
components: { MyCheckBox },
data() {
return {
changeV: true,
}
}
}
</script>
除了绑定的
value
变成了checked
,@input
变成了@change
,传到父组件的参数是e.target.checked
注意: 绝大多数例子中,
$emit
中抛出的事件都是change
,我这里写的是zhuangbi
,其实只要和model
模块中event
属性值一样即可。
此外,外面的props
也不可少。
2. .sync
方式实现双向绑定
如果需要对一个prop
进行双向绑定,可以使用.sync
语法糖。举一个使用场景的例子:别人封装好的 CheckBox 组件,需要做一些样式修改或者功能组合再使用,这就需要对 v-model 的值再来一次双向绑定。拿上面的 MyCheckBox 来说,<my-check-box v-model="checked"/>
,给这个checked
传值可以用 props
,但想把checked
的值传给父组件并赋值给props
的值,就有点麻烦,需要定义一个方法,使用$emit
,父组件监听事件并作赋值操作。现在用.sync
可以一句搞定。
子组件DiyCheckBox
代码:
<template>
<div>
<my-check-box v-model="diyCheck" @change="dChange"/>
</div>
</template>
<script>
import MyCheckBox from './MyCheckBox'
export default {
name: "DiyCheckBox",
components: {MyCheckBox},
props: {
diyCheck: Boolean,
test: String
},
methods: {
dChange(e) {
this.$emit('update:diyCheck', e)
}
}
}
</script>
父组件App.vue
中使用:
<template>
<div id="app">
<diy-check-box :diyCheck.sync="dCheck" />
<div>{{dCheck}}</div>
</div>
</template>
<script>
import DiyCheckBox from '@/components/DiyCheckBox'
export default {
name: 'App',
components: { DiyCheckBox },
data() {
return {
dCheck: true,
}
}
}
</script>
:diyCheck.sync="dCheck"
这句代码相当于:
:diyCheck="dCheck"
@update:diyCheck="dCheck = $event"
语法糖作用很明显,大大简化了代码。
上面代码可以实现想要的功能,只是控制台会有一个警告:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "diyCheck"
found in
---> <DiyCheckBox> at src/components/DiyCheckBox.vue
<App>
<Root>
避免直接改变props
,使用data or computed
代替。所以优化一下,换个写法:
<template>
<div>
<my-check-box v-model="comDiyCheck"/>
</div>
</template>
<script>
import MyCheckBox from './MyCheckBox'
export default {
name: "DiyCheckBox",
components: {MyCheckBox},
props: {
diyCheck: Boolean,
test: String
},
computed: {
comDiyCheck: {
get() {
return this.diyCheck
},
set(e) {
this.$emit('update:diyCheck', e)
}
}
}
}
</script>
使用计算属性后,@change
事件都可以不要了,get()
就是获取props
传值,set(e)
是MyCheckBox
的v-model
值改变了会触发的方法,这里面做法是直接把改变后的值通过$emit
方式发出去。父组件中仍然通过.sync
绑定,代码没有变化。
.sync
可不光能用来做checkbox
的双向绑定,涉及到props
双向绑定的场景都可以用sync
实现。
.sync
传整个对象
如果有许多props
属性需要做双向绑定操作,标签写起来就很长,像这样:
<coverage-charge
v-for="(item, index) in chargingPiles"
:key="index + 'index'"
:code.sync="item.code"
:address.sync="item.address"
:addressType.sync="item.addressType"
:kind.sync="item.kind"
:yearLimitType.sync="item.yearLimitType"
>
</coverage-charge>
官方文档说可以简写成这样:
<text-document v-bind.sync="doc"></text-document>
<!--对应我们的例子就是:-->
<coverage-charge
v-for="(item, index) in chargingPiles"
:key="index + 'index'"
v-bind.sync='item'
>
</coverage-charge>
官方还说:
这样会把
doc
对象中的每一个property
(如title
) 都作为一个独立的prop
传进去,然后各自添加用于更新的v-on
监听器。
按照这个说法,item
的 5 个属性,都会通过 prop
传到子组件,我再在子组件中添加不同的computed
属性即可:
<script>
export default {
name: 'CoverageCharge',
props: {},
computed: {
code: {
get() {
return this.code
},
set(val) {
this.$emit('update:code', val)
}
},
address: {
get() {
return this.address
},
set(val) {
this.$emit('update:address', val)
}
}
... // 其他属性值
}
}
</script>
真这样写,会发现,this.code
、this.address
这些都是undefined
,这里需要在子组件的props
中再定义一遍属性名才行,可以省略各属性的type
和default
值:
props: [ 'code', 'address', 'addressType', 'kind', 'yearLimitType' ]
这样就可以了,.sync
功能强大,用的地方也挺多的。
props
里面东西太多的话,也可以统一定义成一个对象,然后父组件通过v-bind
或者v-model
传进来:
2.1.1 v-bind
方式
<!--子组件-->
props: {
zb: {
type: Object,
default: () => {}
}
},
computed: {
code: {
get() {
return this.zb.code
},
set(val) {
this.$emit('update:code', val)
}
},
address: {
get() {
return this.zb.address
},
set(val) {
this.$emit('update:address', val)
}
}
}
<!--父组件-->
<coverage-charge
v-for="(item, index) in chargingPiles"
:key="index + 'index'"
v-bind.sync='item'
:zb='item'
>
</coverage-charge>
2.2.2 v-model
方式
<!--子组件-->
export default {
model: {
prop: 'zb',
event: 'update'
},
props: {
zb: {
type: Object,
default: () => {}
}
},
computed: {
code: {
get() {
return this.zb.code
},
set(val) {
this.$emit('update:code', val)
}
},
address: {
get() {
return this.zb.address
},
set(val) {
this.$emit('update:address', val)
}
}
}
}
<!--父组件-->
<coverage-charge
v-for="(item, index) in chargingPiles"
:key="index + 'index'"
v-bind.sync='item'
v-model='item'
>
</coverage-charge>
注意
model
中event
值是update
。
3. v-model
和.sync
比较
上面第 2 节第一个例子目的就是把v-model
再包一层,照着第 1 节,用v-model
的方法也能做到。这里只写主要点,不贴源码了:
- 定义
model
模块:model: {prop: 'checked', event: 'zhuangbi' }
props
中定义checked
属性computed
中定义MyChecked: { get(){ return this.checked},set(val) { this.$emit('zhuangbi', val) } }
DiyCheckBox
组件中使用:<my-check-box v-model="MyChecked"/>
- 父组件中使用:
<diy-check-box v-model=suibian" />
,suibian
是父组件data
中定义的变量
可见,v-model
适用于双向绑定单个props
(一个标签中不能有多个v-model
),.sync
适用于双向绑定一到多个props
(一个标签中允许使用多个:xxx.sync=yyy
)。
源码
vue 双向绑定(v-model 双向绑定、.sync 双向绑定、.sync 传对象)的更多相关文章
- vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
- 【vue】跟着老马学习vue-数据双向绑定
学习了node.js教程,只能说是有了一定的了解,之前也了解了webpack和es6的核心内容,也看过vue2.0的官网教程,并结合视频看过项目,但是理解和运用仍然存在很多问题,接下来的一段时间,跟着 ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- Vue.js的类Class 与属性 Style如何绑定
Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...
- 理解ASP.NET Core - 模型绑定&验证(Model Binding and Validation)
注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 模型绑定 什么是模型绑定?简单说就是将HTTP请求参数绑定到程序方法入参上,该变量可以是简单类 ...
- vue中如何在自定义组件上使用v-model和.sync
自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model ...
- v-bind绑定属性样式——class的三种绑定方式
1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...
- input绑定datapicker控件后input再绑定blur或者mouseout等问题
input绑定datapicker控件后input再绑定blur或者mouseout等问题 问题描述:今天在修改一个东西的时候需要给一个input输入域绑定blur事件,从而当它失去焦点后动态修改其中 ...
- python tips:类的绑定方法(bound)和非绑定方法(unbound)
类属性只有类及其实例能够访问,可以理解为一个独立的命名空间. Python中类属性的引用方式有两种: 1. 通过类的实例进行属性引用,称为绑定方法(bound method),可以理解为方法与实例绑定 ...
随机推荐
- Lazysysadmin靶机
仅供个人娱乐 靶机信息 Lazysysadmin靶机百度云下载链接:https://pan.baidu.com/s/1pTg38wf3oWQlKNUaT-s7qQ提取码:q6zo 信息收集 nmap全 ...
- Java基础——JavaDoc生成文档
JavaDoc生成文档 package Top1; /** * @author lwt * @version 1.0 * @since 1.8 * */ public class ...
- python自动化之(自动化测试报告)
前言: 给予你们最关心的3步骤 什么是自动化测试报告? 答:在自动化测试过程中自动生成的测试报告 为什么要做自动生成测试报告? 答:真正的解放双手; 可以形成直观的测试结果; 给自己一个装X的机会; ...
- Cloud-init的安装和使用 --以ubuntu-server-14.04-amd64为例
by hyc 1.Cloud-init安装 已有了一个安装好系统的镜像. 镜像名:ubuntu-test-14.04-server-amd64.img 用户名:user 密码:1 主机名:ubuntu ...
- python 将Mnist数据集转为jpg,并按比例/标签拆分为多个子数据集
现有条件:Mnist数据集,下载地址:跳转 下载后的四个.gz文件解压后放到同一个文件夹下,如:/raw Step 1:将Mnist数据集转为jpg图片(代码来自这篇博客) 1 import os 2 ...
- thunderbird发送纯文本邮件
向邮件列表中发邮件时,要求邮件格式必须是纯文本格式的,在thunderbird中,邮件格式(plain text或者html格式)在[工具->账户设置->[账户名称]->通讯录]下的 ...
- 线程队列 concurrent 协程 greenlet gevent
死锁问题 所谓死锁:是指两个或两个以上的进程或线程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这些永远在互相等待的进 ...
- NOIP 模拟 $23\; \rm 联$
题解 \(by\;zj\varphi\) 区间上的问题,一般都用线段树来解决(但是这题也可以用 \(\rm ODT\)) 对于每段段区间设置三个参数,分别表示这个区间是否只有 \(1\) 或 \(0\ ...
- NOIP 模拟 $17\; \rm 时间机器$
题解 \(by\;zj\varphi\) 一道贪心的题目 我们先将节点和电阻按左边界排序,相同的按右边界排序 对于每一个节点,我们发现,选取左边界小于等于它的电阻中右边界大于它且最接近的它的一定是最优 ...
- 题解 P5038 [SCOI2012]奇怪的游戏
题解 题目 做这题之前,做了一道叫星际战争的题,很容易想到二分 \(+\) 网络流,那么二分啥呢? 我们先推一下式子,因为是对相邻格子加数,那么可以联想到黑白染色类问题. 设有黑色格子 \(B\) 个 ...