在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. 【力扣】剑指 Offer 25. 合并两个排序的链表

    输入两个递增排序的链表,合并这两个链表并使新链表中的节点仍然是递增排序的. 示例1: 输入:1->2->4, 1->3->4输出:1->1->2->3-> ...

  2. 【C/C++】例题5-4 反片语/算法竞赛入门经典/C++与STL入门/映射:map

    本题是映射:map的例题. map:键值对. [题目] 输入一些单词,找出所有满足如下条件的单词:该单词不能通过字母重排,得到输入文本中的另外一个单词. 在判断是否满足条件时,字母不分大小写,但在输出 ...

  3. python使用gitlab-api

    目录 一.简介 二.示例 讲解 配置文件方式存储token 其它返回 三.其它操作 一.简介 公司使用gitlab 来托管代码,日常代码merge request以及其他管理是交给测试,鉴于操作需经常 ...

  4. 远程调用RPC

    一.简介 RPC,就是Remote Procedure Call的简称呀,翻译成中文就是远程过程调用. 本地调用,就好比你现在在家里,你要想洗碗,那你直接把碗放进洗碗机,打开洗碗机开关就可以洗了.这就 ...

  5. antd动态的表格合并(包含排序功能)

    主要是两个步骤, 1.处理接口返回数据,给其添加两个属性,一个是合并行数(列数),一个是当前数据的序号 2.在columns结合antd官网的处理方法合并表格 3.尽可能得减少计算量 数据处理函数 / ...

  6. 2020KCTF秋季赛签到题

    比赛平台:https://ctf.pediy.com/game-season_fight-158.htm 开场 签到题 例行检查,64位程序,无壳 试运行一下,看看大概的情况 64位ida载入,根据运 ...

  7. C# VS 调试报错:未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed”或它的某一个依赖项

    今天在使用 VS(VisualStudio) 调试一个复杂的 WinForm 程序,总是提示错误: 未能加载文件或程序集"Newtonsoft.Json, Version=4.5.0.0, ...

  8. 四、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-会话好友列表的实现

    会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...

  9. ACwing1208. 翻硬币

    题目: 小明正在玩一个"翻硬币"的游戏. 桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可能情形是:**oo***oooo 如果 ...

  10. 解决Xshell 连接Linux 窗口不活动会自动断开连接

    修改linux服务器ssh断开时间  修改profile配置 vim /etc/profile 增加配置  后面单位秒 这里就是三分钟不活动断开连接 TMOUT=180 然后使用 wq! 进行保存,使 ...