原文地址: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可以简化上面代码,只需要修两个地方:

  1. 组件内触发的事件名称以“update:myPropName”命名,相应的上述info组件改为 update:value
  2. 父组件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修饰符的更多相关文章

  1. vue中.sync 修饰符

    一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...

  2. 理解vue 修饰符sync

    也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...

  3. 深入理解vue 修饰符sync

    [ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...

  4. 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...

  5. vue 之 .sync 修饰符

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...

  6. 使用sync 修饰符------子组件内部可以修改props

    首先看一个需求,外部点击一个按钮,让弹窗组件显示(也就是将弹窗组件显示的flag置为true),点击弹窗组件内部的某个按钮 ,让改props置为false,关闭弹窗,但是会报警告,因为内层组件不能修改 ...

  7. Vue sync修饰符的使用

    父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...

  8. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”

    一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父 ...

随机推荐

  1. WebGIS博客文本分析(词频分析)手动扒取 去除格式 词语分割 统计分析

    1.      [置顶](一)开篇—杂谈WebGIS 摘要: 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 ...

  2. 【repost】 原生JS执行环境与作用域深入理解

    首先,我们要知道执行环境和作用域是两个完全不同的概念. 函数的每次调用都有与之紧密相关的作用域和执行环境.从根本上来说,作用域是基于函数的,而执行环境是基于对象的(例如:全局执行环境即window对象 ...

  3. eclipse中ctrl+K失效

    从昨天开始eclipse中Ctrl+d和Ctrl+K就失效了,简直无法忍受 解决方案: Window --> preferences --> General --> keys

  4. request.getScheme() 使用方法

    今天在看代码时,发现程序使用了 request.getScheme() .不明白是什么意思,查了一下.结果整理如下: 1.request.getScheme() 返回当前链接使用的协议:一般应用返回h ...

  5. SRM482

    250pt 题意:给定n把锁,第i轮每间隔i个打开一个木有打开的.问最后打开的事几 思路:直接vector模拟 code: #line 7 "LockersDivOne.cpp" ...

  6. Android-Java-synchronized静态方法&字节码文件对象

    上一篇博客 Android-Java-同步方法-synchronized,中讲解了普通方法加入synchronized修饰符,此synchronized的同步锁是this,还介绍方法的封装性,这篇博客 ...

  7. MariaDB安装、初始化及常用操作

    1.Linux下安装与初始化 #安装 yum install mariadb-server #设置编码 vim /etc/my.cnf [mysqld]character-set-server=utf ...

  8. nginx 执行理解

    nginx是一个代理(apache)或者自己处理 location ~ \.php { try_files $uri =404; fastcgi_pass unix:/tmp/php-cgi.sock ...

  9. 拟物设计和Angular的实现 - Material Design

    Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...

  10. 【C#进阶】拥抱Lambda(二)

    语言的设计,真的是挺有意思的.第一次看这个代码[1]时,旁人随口了一句"哇,好多实心句号". 当时马上一个想法是--怎么实现的?返回了对象,然后再调用方法?然后就放下了,后来发现, ...