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修饰符的使用
赞 (0)

相关推荐

  • 如何理解Vue的.sync修饰符的使用

    本文介绍了Vue的.sync修饰符的使用,分享给大家,也给自己留个笔记 案例 <div id="app"> <div>{{bar}}</div> <my-comp :foo.sync="bar"></my-comp> <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-

  • vue 之 .sync 修饰符示例详解

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行"双向绑定". 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值. 这很方便,但也会导致问题,因为它破坏了单向数据流.(数据自上而下流,事件自下而上走) 由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态. 这在 debug 复杂

  • c++中的static修饰符示例详解

    前言 本文主要给大家介绍了关于c++中static修饰符的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 下面一段是引用自effective c++ 中的一句话: 所谓的static对象,其寿命是从构造出来到程序结束为止(以下文章不再赘诉).因此stack和heap-base对象都被排除.这种对象包括global对象,定义于namespace作用域内的对象,在classes内,在函数内,以及在file作用域内被声明为static的对象. 所以static在c++中可以

  • 详解Vue的sync修饰符

    详解Vue的sync修饰符

    1 .指令 指令即 Directive,从字面意思理解就是我告诉你要做什么,就是发送了一个指令,然后由接收指令的人去做就好了.在 Vue 中的指令有个统一好认的格式,就是以 v- 开头的就是指令,如: <div v-text="x"> </div> //v-text指定标签文本指令 <div v-on:click="add"> <div> //v-on事件绑定指令 但并不是所有的指令都以 v- 开头,对于一些简写,也是

  • Vue中sync修饰符分析原理及用法示例

    Vue中sync修饰符分析原理及用法示例

    目录 不使用sync修饰符的代码示例 使用sync修饰符的代码示例 sync修饰符的原理 前几天在看别人代码时,发现了sync修饰符的妙用,特记录其用法和原理如下. 不使用sync修饰符的代码示例 父组件: <template> <div> <div v-if="show">11111</div> <h3>下面是子组件</h3> <SyncDemo :show="show" @update

  • vue 实现滑动块解锁示例详解

    vue 实现滑动块解锁示例详解

    目录 引言 下载需要用到的组件库 书写登录页面 template 结构: script 逻辑: style 样式: 登录页面效果展示: 写滑动解锁组件 template 模板: script 代码: style 样式: 将滑动组件运用到我们的 Login 组件中: 补充逻辑代码 最终效果: 引言 从0开始,写一个登录滑动解锁的功能. 首先,新创建一个 vue 项目. 或者在已有的项目写也可以. 将无用的代码删一下. 下载需要用到的组件库 1.下载 element-ui. yarn add ele

  • Java四种权限修饰符知识点详解

    Java中有四种权限修饰符 public protected (default) private 同一个类 yes yes yes yes 同一个包 yes yes yes no 不同包子类 yes yes no no 不同包非子类 yes no no no Warning:(default)并不是关键字"default",而是根本不写 知识点补充: Java语言4种访问权限修饰符 Java语言4种访问权限修饰符,但是仅有3个关键字,因为不写访问权限,在Java中被称为默认权限,或同包

  • Vue项目接入Paypal实现示例详解

    一.支付流程 在paypal的官网上给出了这个按钮内部封装的流程,整个流程只需要用户点击按钮,触发创建订单事件,然后我们再监听用户支付成功的回调,拿到订单id传给后端,让后端再进行一次校验. 二.实现方案 接入方式 优点 缺点 相关资料 在html中插入paypal的script脚本 实现方式比较简单 1.安全性问题:公司的client_id会暴露在代码中 2.引用的按钮样式比较难自定义 官方文档:https://developer.paypal.com/docs/checkout/integr

  • C++中static修饰符的详解及其作用介绍

    C++中static修饰符的详解及其作用介绍

    目录 概述 静态数据成员 引用静态数据成员 用类名访问数据成员 静态成员函数 综合案例 概述 static (静态) 修饰符是用来控制变量的存储方式和可见性的. 静态局部变量存储在静态区域: static 的性质: 局部特性:作用范围仅限于本函数 静态特性:存储在静态区, 函数调用结束后不孝顺而保留原值. 在下一次调用时, 保留上一次调用结束时的值. 静态数据成员 在我们定义全局变量的时候, 我们会发现一个问题: 我们可以在程序各处自由的修改全局变量的值 (不安全). 静态数据成员的特点: 静态

  • C++中const修饰符的详解及其作用介绍

    C++中const修饰符的详解及其作用介绍

    目录 概述 常对象 常对象成员 常成员函数 常数据成员 数据成员访问限制 常对象修改的限制 常指针 指向常变量的指针 指向对象的指针 小结 对象的常引用 总结 概述 const 是 constant 的缩写, 是不变的意思. 在 C++ 中是用来修饰内置类型变量, 自定义对象, 成员函数, 返回值, 函数参数. const 可以帮我们避免无意之中的错误操作. 使用 const, 把有关的数据定义为常量 (常变量 / 常对象 / 常函数). const 既可以使数据在一定范围内共享, 又要保证它不

随机推荐