一、同时设置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. php.ini 配置详解【转载】

    [PHP]engine = On   #是否启用PHP解析引擎zend.ze1_compatibility_mode = Off #是否在Last-Modified应答头中放置该PHP脚本的最后修改时 ...

  2. 【代码笔记】iOS-圆角矩形

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...

  3. PostgreSQL系列一:PostgreSQL简介与安装

    一.PostgreSQL简介     1.1 PostgreSQL概述             PostgreSQL数据库是目前功能最强大的开源数据库,支持丰富的数据类型(如JSON和JSONB类型. ...

  4. WPF: 旋转Thumb后,DragDelta移动距离出错的解决

    当Thumb跟随Grid旋转90度后,拖拽控件时会飞掉. <Grid x:Name="gridMain" Width="100" Height=" ...

  5. 利用nginx向现有网站添加登录验证功能(不添加修改现有网站代码)

    在不改变现有网站代码的前提下加入验证功能: 1.假设现有网站后端nodejs,端口3000,nginx配置如下 server { listen 80; server_name localhost; l ...

  6. PHP 设计模式 笔记与总结(9)数据对象映射模式

    [数据对象映射模式] 是将对象和数据存储映射起来,对一个对象的操作会映射为对数据存储的操作.例如在代码中 new 一个对象,使用数据对象映射模式就可以将对象的一些操作比如设置一些属性,就会自动保存到数 ...

  7. 【Git - 基础篇】如何快速有效的管理你的代码 - 安装和配置

    [本文仅凭个人经验进行整理,如有错误,欢迎指正,互相学习^^] -------------------------------------------------------------------- ...

  8. iOS开发几年了,你清楚OC中的这些东西么1

    前言 几年前笔者是使用Objective-C进行iOS开发, 不过在两年前Apple发布swift的时候,就开始了swift的学习, 在swift1.2发布后就正式并且一直都使用了swift进行iOS ...

  9. 在mysql 中两种锁定问题

    mysql 中15.2.10.5 中描述了两个问题,且分别给出了解决办法. 1.向子表中写入数据,但写入之前需确保父表中存在其相应信息. 可能出现,在已经读取父表中的数据,但另一请求将其删除. 办法: ...

  10. 搞定单模式匹配(简单,KMP)

    模式匹配是查找的一种,分为单模式匹配和多模式匹配.查找,就是在一个集合中查找一个或多个元素,查找一个元素就叫单模式匹配,查找多个元素就是多模式匹配,这里只探讨单模式匹配.虽然模式匹配看上去与数字的查找 ...