深入理解.sync修饰符
原文地址:http://www.geeee.top/2019/04/17/vue-sync/ 转载请注明出处
.sync修饰符
一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的效果该怎么办呢? 简单的方法是子组件向父组件发送一个事件,父组件监听该事件,然后更新prop。具体如下:
// info.vue组件定义了一个value 属性, 和一个valueChanged事件
<template>
<div>
<input @input="onInput" :value="value"/>
</div>
</template>
<script>
export default {
props: {
value: {
type: String
}
},
methods: {
onInput(e) {
this.$emit("valueChanged", e.target.value)
}
}
}
</script>
父组件index.vue
<template>
<info :value="myValue" @valueChanged="e => myValue = e"></info>
</template>
<script>
inport info from './info.vue';
export default {
components: {
info,
},
data() {
return {
myValue: 1234,
}
},
}
</script>
上述写法太麻烦了,通过.sync可以简化上面代码,只需要修两个地方:
- 组件内触发的事件名称以“update:myPropName”命名,相应的上述info组件改为 update:value
- 父组件v-bind:value 加上.sync修饰符,即 v-bind:value.sync
这样父组件就不用再手动绑定@update:value事件了。
用法1: v-bind:prop.sync="propvalue"
// info.vue组件
...
methods: {
onInput(e) {
this.$emit("update:value", e.target.value)
}
}
// index.vue组件
<info :value.sync="myValue"></info>
用法2 v-bind.sync="obj"
如果一个组件的多个prop都要实现双向绑定,根据上面学到的知识,只需要每个prop加sync修饰符
<info :a.sync="value1" :b.sync="value2" :c.sync="value2" :d.sync="value2"></info>
这样写太麻烦,vue提供了一种更简便的方法, v-bind.sync = "对象"
<info v-bind.sync="obj"></info>
...
<script>
..
data() {
obj: {a: '', b: '', c: '', d: ''}
}
..
</script>
注意:
带有.sync修饰符的v-bind不能喝表达式一起使用(例如 v-bind:title.sync = "doc.title + '!'"是无效的)。取而代之的是,你只能你想要绑定的属性名。
小结
一个组件需要提供多个双向绑定的属性时使用,只能选用一个属性来提供 v-model 功能,但如果有其他属性也要提供双向绑定,就需要.sync
深入理解.sync修饰符的更多相关文章
- vue中.sync 修饰符
一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...
- 理解vue 修饰符sync
也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...
- 深入理解vue 修饰符sync
[ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...
- 深入理解vue 修饰符sync【 vue sync修饰符示例】
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...
- vue 之 .sync 修饰符
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...
- 使用sync 修饰符------子组件内部可以修改props
首先看一个需求,外部点击一个按钮,让弹窗组件显示(也就是将弹窗组件显示的flag置为true),点击弹窗组件内部的某个按钮 ,让改props置为false,关闭弹窗,但是会报警告,因为内层组件不能修改 ...
- Vue sync修饰符的使用
父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”
一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父 ...
随机推荐
- WebGIS博客文本分析(词频分析)手动扒取 去除格式 词语分割 统计分析
1. [置顶](一)开篇—杂谈WebGIS 摘要: 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 ...
- 【repost】 原生JS执行环境与作用域深入理解
首先,我们要知道执行环境和作用域是两个完全不同的概念. 函数的每次调用都有与之紧密相关的作用域和执行环境.从根本上来说,作用域是基于函数的,而执行环境是基于对象的(例如:全局执行环境即window对象 ...
- eclipse中ctrl+K失效
从昨天开始eclipse中Ctrl+d和Ctrl+K就失效了,简直无法忍受 解决方案: Window --> preferences --> General --> keys
- request.getScheme() 使用方法
今天在看代码时,发现程序使用了 request.getScheme() .不明白是什么意思,查了一下.结果整理如下: 1.request.getScheme() 返回当前链接使用的协议:一般应用返回h ...
- SRM482
250pt 题意:给定n把锁,第i轮每间隔i个打开一个木有打开的.问最后打开的事几 思路:直接vector模拟 code: #line 7 "LockersDivOne.cpp" ...
- Android-Java-synchronized静态方法&字节码文件对象
上一篇博客 Android-Java-同步方法-synchronized,中讲解了普通方法加入synchronized修饰符,此synchronized的同步锁是this,还介绍方法的封装性,这篇博客 ...
- MariaDB安装、初始化及常用操作
1.Linux下安装与初始化 #安装 yum install mariadb-server #设置编码 vim /etc/my.cnf [mysqld]character-set-server=utf ...
- nginx 执行理解
nginx是一个代理(apache)或者自己处理 location ~ \.php { try_files $uri =404; fastcgi_pass unix:/tmp/php-cgi.sock ...
- 拟物设计和Angular的实现 - Material Design
Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...
- 【C#进阶】拥抱Lambda(二)
语言的设计,真的是挺有意思的.第一次看这个代码[1]时,旁人随口了一句"哇,好多实心句号". 当时马上一个想法是--怎么实现的?返回了对象,然后再调用方法?然后就放下了,后来发现, ...