在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”。

在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值。

这很方便,但也会导致问题,因为它破坏了单向数据流。(数据自上而下流,事件自下而上走)

由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态。

这在 debug 复杂结构的应用时会带来很高的维护成本。于是我们在 vue 2.0 中移除了 .sync 。

但是在实际应用中,我们发现 .sync 还是有其适用之处的,比如在开发可复用的组件库时。(懵逼○△○)

我们需要做的只是  让子组件改变父组件状态的代码更容易被区分。

于是从 vue 2.3.0 开始,我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。他会被自动扩展为一个  自动更新父组件属性的 v-on 监听器。

例如:

<child  :foo.sync=”msg”></child>  就会被扩展为:  <child  :foo=”bar”  @update:foo=”val => bar = val”>   (@是v-on的简写)

当子组件需要更新 foo 的值的时候,他需要显示的触发一个更新事件:   this.$emit( “update:foo”, newValue );

初始状态:

点击之后的状态:

原理就是父组件向子组件传递了一个函数:function (newValue) { this.msg = newValue; }

当使用一个对象一次性设置多个属性的时候,这个 .sync 修饰符也可以和 v-bind 一起使用。

例如:  <child  v-bind.sync = “{ message: msg, uC: uc}”></child>     (不能写成  :.sync="{*********}",否则会报错的)

这个例子会为 message 和 uC 同时添加用于更新的 v-on 监听器。

我不知道这是什么原因,可能是我弄错了,希望成功的兄弟可以告诉我一下,非常感谢 ^_^

vue 之 .sync 修饰符的更多相关文章

  1. vue中.sync 修饰符

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

  2. vue的.sync 修饰符

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

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

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

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

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

  5. Vue中.sync修饰符

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

  6. Vue sync修饰符的使用

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

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

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

  8. vue .sync修饰符

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

  9. Vue中v-model解析、sync修饰符解析

    上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...

随机推荐

  1. python模块之xml

    xml模块 xml结构 xml是种实现不同语言或程序之间进行数据交换的协议,跟json差不多,但没json使用简单.但是因为历史遗留问题,至今很多行业依然使用xml这种数据格式. xml的格式如下,是 ...

  2. 第一册:lesson eighty nine.

    原文: For sale. A:Good afternoon. I believe that the house is for sale. B:That's right. A:May I have a ...

  3. 《深入理解Java虚拟机》(三)垃圾收集器与内存分配策略

    垃圾收集器与内存分配策略 详解 3.1 概述 本文参考的是周志明的 <深入理解Java虚拟机>第三章 ,为了整理思路,简单记录一下,方便后期查阅. 3.2 对象已死吗 在垃圾收集器进行回收 ...

  4. 杭电ACM2001--计算两点间的距离

    计算两点间的距离 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  5. Java Date类的使用总结

    Date类表示特定的瞬间,精确到毫秒. 有2种方法可以创建Date对象(这里不考虑已过时的构造函数) 1.public Date()——分配 Date 对象并初始化此对象,以表示分配它的时间(精确到毫 ...

  6. Java win7或 xp下配置JDK环境变量

    JAVA win7或 xp下配置JDK环境变量 by:授客 QQ:1033553122 1.安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为D:\java\jdk1.5.0_08 ...

  7. 异常: Recieved SHUTDOWN signal from Resourcemanager ,Registration of NodeManager failed, Message from ResourceManager: NodeManager from localhost doesn't satisfy minimum allocations, Sending SHUTDOWN s

    异常: Recieved SHUTDOWN signal from Resourcemanager ,Registration of NodeManager failed, Message from ...

  8. 百度前端学院-基础学院-第七天到第八天之BFC

    1.BFC简介 BFC全称"block formatting context",中文为“块级格式化上下文”.特征总之记住一句话: BFC元素特征表现原则就是:内部元素无论怎么翻江倒 ...

  9. 详解纯css实现瀑布流(multi-column多列及flex布局)

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  10. 51nod1238 最小公倍数之和 V3(莫比乌斯反演)

    题意 题目链接 Sol 不想打公式了,最后就是求一个 \(\sum_{i=1}^n ig(\frac{N}{i})\) \(g(i) = \sum_{i=1}^n \phi(i) i^2\) 拉个\( ...