一、同时设置1个 prop

1.以 update:my-prop-name 的模式触发事件,如对于title属性:

this.$emit('update:title', newTitle)

2.然后父组件可以监听那个事件并根据需要更新一个本地的数据属性:

<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>

为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符:

<text-document v-bind:title.sync="doc.title"></text-document>

二、同时设置多个 prop

当我们用一个对象同时设置多个 prop 的时候,也可以将这个 .sync 修饰符和 v-bind 配合使用:

<text-document v-bind.sync="doc"></text-document>

这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。

[Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”的更多相关文章

  1. vue 之 .sync 修饰符

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

  2. vue中.sync 修饰符

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

  3. vue的.sync 修饰符

    很多时候,我们会对 prop (父子组件传递数据的属性) 进行“双向绑定” 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会 ...

  4. Vue中.sync修饰符

    Vue 中 sync的作用 <FatherComponent :a.sync = 'b'><FatherComponent /> 子组件中emit('update:a',... ...

  5. vue中.sync修饰符,实现子组件实时更新父组件的值

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...

  6. vue .sync修饰符

    .sync 修饰符 对一个 prop 进行“双向绑定”时,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 那这个修饰符的原理是什么呢?其实还是vu ...

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

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

  8. VUE组件3 数据流和.sync修饰符

    单向数据流:数据通过prop从父组件传递到子组件中,当父级组件中的数据更新时,传子组件也会更新,但不能在子组件中修改.防止子组件在无意中修改,改变父级组件状态 然而,双向数据绑定在某些情况下有用.如果 ...

  9. vue组件双向绑定.sync修饰符的一个坑

    我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...

随机推荐

  1. PushState+Ajax实现简单的单页面应用SPA

    http://www.helloweba.com/view-blog-386.html 单页面应用(Single Page Application)简称SPA,使用SPA构建的应用优点有用户体验好.速 ...

  2. lnmp1.4环境下thinkphp3.2配置pathinfo模式

    1.打开php.ini 通常该文件在 /usr/local/php/etc/php.ini vi /usr/local/php/etc/php.ini 找到 cgi.fix_pathinfo,默认为0 ...

  3. HDU1087:Super Jumping! Jumping! Jumping!(简单dp)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1087 水题,可是我却因为dp数组的初始化造成了多遍wa,这题就是求上升序列的最大和. 转移方程: 首先要对 ...

  4. Linux系统基础命令总结

    一.帮助命令(1)helpxxxx --helphelp xxxx(2)manman xxxx二.ls查看命令:列表显示目录内的文件及目录ls 参数-l 以列表的形式显示-d 显示目录本身属性-a显示 ...

  5. Python+Appium API

    1.contextscontexts(self): Returns the contexts within the current session. 返回当前会话中的上下文,使用后可以识别H5页面的控 ...

  6. NC开发笔记指导

    修改端口 InvocationInfoProxy.getInstance().get().getUserCode(); 前台 Nchome F:\JAVA\Projects\ERPEHROA\ufid ...

  7. JS正则表达式从入门到入土(8)—— REGEXP对象属性

    对象属性 常用对象属性主要有以下几种: 1.global: 是否全文搜索,默认false 2.ignore case:是否大小写敏感,默认是false 3.multiline:多行搜索,默认值是fal ...

  8. matlab基本操作总结

    1.clear;//清除工作平台变量2.close all;//关闭打开的图形窗口3.I = imread('C:\Users\dell\Desktop\rice.jpg');//读取图像,存储在I数 ...

  9. Kafka学习之(四)PHP操作Kafka

    简单测试 环境:Centos6.4,PHP7,kafka服务器IP:192.168.9.154,PHP服务器:192.168.9.157 在192.168.9.157创建目录和文件. //生产者 &l ...

  10. SpringCloud Feign报错:Method has too many Body parameters

    1.feign多参数问题 1.1GET方式 错误写法 @RequestMapping(value="/test", method=RequestMethod.GET) Model ...