在vue的组件通信props中,一般情况下,数据都是单向的,子组件不会更改父组件的值,那么vue提供.sync作为双向传递的关键字,实现了父组件的变动会传递给子组件,而子组件的carts改变时,通过事件机制,修改父组件的cart。完成了子组件carts和父组件cart的双向映射。

// 父组件
<addicon :cart.sync="cart"></addicon> //子组件
props: ['cart'],
data: function () {
return {
carts: this.cart;
}
},
methods:{
add:function(){
this.carts=10;
this.$emit('update:cart',this.carts);
}
}

vue组件中的.sync修饰符使用的更多相关文章

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

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

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

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

  3. vue中的.sync修饰符用法

    在项目中接触到父组件传值给子组件的时候,想在子组件改变父组件传的值.(比如用于弹窗关闭) 但是正常来说,vue2是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...

  4. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  5. 43.VUE学习之--组件之使用.sync修饰符与computed计算属性超简单的实现美团购物车原理

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

  6. vue 之 .sync 修饰符

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

  7. 使用sync 修饰符------子组件内部可以修改props

    首先看一个需求,外部点击一个按钮,让弹窗组件显示(也就是将弹窗组件显示的flag置为true),点击弹窗组件内部的某个按钮 ,让改props置为false,关闭弹窗,但是会报警告,因为内层组件不能修改 ...

  8. vue的.sync 修饰符

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

  9. Vue .sync修饰符与$emit(update:xxx)写法问题

    在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果,具体如下: 使用.sync修饰符,即 // ...

随机推荐

  1. 【科研工具】流程图软件Visio Pro 2019 详细安装破解教程

    [更新区] 安装教程我下周会在bilibili上传视频,这周事情太多暂时先不弄. [注意] 安装Visio需要和自己的Word版本一样,这里因为我的Word是学校的正版2019(所以学校为什么正版没买 ...

  2. 『学了就忘』Linux启动引导与修复 — 74、Linux系统的修复模式(光盘修复模式)

    目录 1.光盘修复模式概念 2.光盘修复模式修复系统问题 (1)准备系统光盘 (2)进入BIOS (3)修改BIOS的启动顺序 (4)进入光盘修复模式 (5)修复系统 (6)修复系统实操 (7)总结 ...

  3. Nginx结构原理全解析

    目录 一.Nginx简单介绍 二.Nginx优势 IO多路复用epoll模型 轻量级 Nginx的基本功能 .Nginx应用场景 Nginx代理 三.Nginx的结构解析 进程操作 事件模型 事件处理 ...

  4. Tableau如何绘制瀑布图

    一.将子类别拖至列,利润拖拽至行,类型改为甘特条形图 二 右键利润-快速表计算-汇总(数据会从左向右显示累计汇总) 三.创建计算字段-[利润] 四.将负利润拖拽到大小,利润拖拽到颜色 分析-合计-显示 ...

  5. Niushop开源商店渗透测试

    靶机 提取码:le8l 首先连上靶机 先扫一下靶场ip,看看开启了哪些端口 开启了80端口,扫描一下目录 一个shop的界面, 一个admin后台管理界面 其他的目录翻看了一下, 看样子是网站的配置文 ...

  6. [BUUCTF]PWN20——ciscn_2019_n_5

    [BUUCTF]PWN20--ciscn_2019_n_5 附件 步骤: 例行检查,64位,没有开启任何保护 试运行一下程序,看看程序的执行情况 64位ida载入,找到main函数, 逻辑很简单,第一 ...

  7. 总结Vue第二天:自定义子组件、父子组件通信、插槽

    总结Vue第二天:自定义子组件.父子组件通信.插槽 一.组件: 组件目录 1.注册组件(全局组件.局部组件和小demo) 2.组件数据存放 3.父子组件通信(父级向子级传递数据.子级向父级传递数据) ...

  8. Windows系统CMD命令bat脚本编写

    复制文件(/y 表示不提示确认框,/-y 表示提示是否覆盖确认) echo "复制文件" copy /y D:\apache-zookeeper-3.6.3.tar.gz E:\l ...

  9. 价格BigDecimal的加减乘除、小数四舍五入、比较

    num2必须改用传入String类型 //加法 BigDecimal result1 = num1.add(num2); //减法 BigDecimal result2 = num1.subtract ...

  10. JS获取当前页面的网址链接

    JavaScript获取当前页面的URL .链接地址 var currUrl = decodeURIComponent(location.href.split('#')[0]); java获取方式:h ...