在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. XML名命空间

    XML的名命空间就类似于java的包,命名空间定义:xmlns:***="URI",默认命名空间定义:xmlns="URI" 引号中的URl内容用来唯一标识命名 ...

  2. 【C/C++】引用&的含义/语法/作为函数参数/函数返回值/本质/常量引用

    含义 引用不产生副本,只是给原变量起了别名. 对引用变量的操作就是对原变量的操作. 基本语法 数据类型 &别名 = 原名 e.g. int a = 10; int &b = a; // ...

  3. numpy基础教程--二维数组的转置

    使用numpy库可以快速将一个二维数组进行转置,方法有三种 1.使用numpy包里面的transpose()可以快速将一个二维数组转置 2.使用.T属性快速转置 3.使用swapaxes(1, 0)方 ...

  4. centos7部署二进制mysql-5.6

    目录 一.环境声明 二.程序部署 一.环境声明 [mysql-Server] 主机名 = host-1 系统 = centos-7.3 地址 = 1.1.1.1 软件 = mysql-5.6.39 3 ...

  5. 安装火狐浏览器报错找不到VCRUNTIME140_1.DLL

    产生原因参考及下载地址:https://cn.dll-files.com/vcruntime140_1.dll.html vcruntime140_1.dll 相关的错误可能源于多种不同原因.比如,错 ...

  6. IDEA 2021.2.1 破解版下载_激活安装图文教程(永久激活,亲测有效)

    1.IntelliJ IDEA 2021 链接:https://pan.baidu.com/s/1Pwz3GrrkJdDZzg-wg5UjMw 提取码:56o6 无限重置 30 天试用期补丁 链接:h ...

  7. 【cs231n笔记】assignment1之KNN

    k-Nearest Neighbor (kNN) 练习 这篇博文是对cs231n课程assignment1的第一个问题KNN算法的完成,参考了一些网上的博客,不具有什么创造性,以个人学习笔记为目的发布 ...

  8. 年度最受欢迎的开源CHROME插件

    又到了年底,时间过得飞快,每到年底就有各种各样的总结各种各样的奖项出来.前几天谷歌就公布了2021年年度最受欢迎Chrome插件名单,名单共有13个. 让很多网友费解的是,其中有很多并不是今年刚出现的 ...

  9. Java 中接口和抽象类的 7 大区别!

    本文已收录<Java常见面试题>:https://gitee.com/mydb/interview ​ Java 是一门面向对象的编程语言,面向对象的编程语言有四大特征:抽象.封装.继承和 ...

  10. host-manager does not exist or is not a readable directory

    当tomcat启动出现这个错误时,按照如下步骤可以解决: 1.删掉F:\tomcat20111101\apache-tomcat-6.0.26\conf\Catalina目录下的localhost文件 ...