vue 之 .sync 修饰符
在一些情况下,我们可能会需要对一个 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 修饰符的更多相关文章
- vue中.sync 修饰符
一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...
- vue的.sync 修饰符
很多时候,我们会对 prop (父子组件传递数据的属性) 进行“双向绑定” 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会 ...
- [Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”
一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父 ...
- vue中.sync修饰符,实现子组件实时更新父组件的值
vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...
- Vue中.sync修饰符
Vue 中 sync的作用 <FatherComponent :a.sync = 'b'><FatherComponent /> 子组件中emit('update:a',... ...
- Vue sync修饰符的使用
父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue .sync修饰符
.sync 修饰符 对一个 prop 进行“双向绑定”时,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 那这个修饰符的原理是什么呢?其实还是vu ...
- Vue中v-model解析、sync修饰符解析
上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...
随机推荐
- python模块之xml
xml模块 xml结构 xml是种实现不同语言或程序之间进行数据交换的协议,跟json差不多,但没json使用简单.但是因为历史遗留问题,至今很多行业依然使用xml这种数据格式. xml的格式如下,是 ...
- 第一册: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 ...
- 《深入理解Java虚拟机》(三)垃圾收集器与内存分配策略
垃圾收集器与内存分配策略 详解 3.1 概述 本文参考的是周志明的 <深入理解Java虚拟机>第三章 ,为了整理思路,简单记录一下,方便后期查阅. 3.2 对象已死吗 在垃圾收集器进行回收 ...
- 杭电ACM2001--计算两点间的距离
计算两点间的距离 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- Java Date类的使用总结
Date类表示特定的瞬间,精确到毫秒. 有2种方法可以创建Date对象(这里不考虑已过时的构造函数) 1.public Date()——分配 Date 对象并初始化此对象,以表示分配它的时间(精确到毫 ...
- Java win7或 xp下配置JDK环境变量
JAVA win7或 xp下配置JDK环境变量 by:授客 QQ:1033553122 1.安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为D:\java\jdk1.5.0_08 ...
- 异常: 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 ...
- 百度前端学院-基础学院-第七天到第八天之BFC
1.BFC简介 BFC全称"block formatting context",中文为“块级格式化上下文”.特征总之记住一句话: BFC元素特征表现原则就是:内部元素无论怎么翻江倒 ...
- 详解纯css实现瀑布流(multi-column多列及flex布局)
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
- 51nod1238 最小公倍数之和 V3(莫比乌斯反演)
题意 题目链接 Sol 不想打公式了,最后就是求一个 \(\sum_{i=1}^n ig(\frac{N}{i})\) \(g(i) = \sum_{i=1}^n \phi(i) i^2\) 拉个\( ...