第八十四篇:Vue购物车(五) 商品数量的增减
好家伙,
1.商品数量的增减
我们把商品的数量增减独立出来,写成一个独立的组件Counter
<template>
<div class="number-container d-flex justify-content-center align-items-center">
<!-- 减 1 的按钮 -->
<button type="button" class="btn btn-light btn-sm">-</button>
<!-- 购买的数量 -->
<span class="number-box">1</span>
<!-- 加 1 的按钮 -->
<button type="button" class="btn btn-light btn-sm">+</button>
</div>
</template> <script>
export default {}
</script> <style lang="less" scoped>
.number-box {
min-width: 30px;
text-align: center;
margin: 0 5px;
font-size: 12px;
} .btn-sm {
width: 30px;
}
</style>
它长这个样子:
我们的组件关系为:
App.vue(父组件)==>Goods.vue(商品的渲染)==>Counter.vue(商品的增减)
嵌套关系清楚了,那么传值的步骤也清楚了
我们先在Counter添加一个进行商品数量更改的方法,随后,想办法把这个值传回到App.vue
这里的传值就是孙=>子=>父,看着都很麻烦,所以我们这里用到的传值方案是eventBus
当然了,传值时不仅仅是商品的数量,还有商品的id
Counter.vue中的props定义
props:{
isfull:{
type:Boolean,
default:true
},
amount:{
type:Number,
default:0
}
},
Goods.vue中组件调用时的传值
<Counter :num="count" :id="id"></Counter>
在Counter.vue中为button绑定点击触发add方法
<button type="button" class="btn btn-light btn-sm"
@click="add">+</button>
方法add的定义:
methods:{
add(){
//要发送给App的数据格式为{ id,value }
//其中,id是商品的id;value是商品最新的购买数量
const obj ={ id:this.id,value:this.num+1 }
//通过EventBus把obj对象,发送给App.vue组件
console.log(obj)
bus.$emit('share',obj)
//把obj对象传到App.vue中
}
}
对了,不要忘记导入eventBus.js
import bus from '../eventBus.js'
在eventBus.js中(与App.vue平级)
import Vue from 'vue' export default new Vue()
回到App.vue中,
添加created钩子的定义
created(){ bus.$on('share',val=>{
if(item.id===val.id){
item.goods_count=val.value
return true
}
})
},
商品数量增减的功能就实现了,nice
第八十四篇:Vue购物车(五) 商品数量的增减的更多相关文章
- 《手把手教你》系列基础篇(八十四)-java+ selenium自动化测试-框架设计基础-TestNG日志-上篇(详解教程)
1.简介 TestNG还为我们提供了测试的记录功能-日志.例如,在运行测试用例期间,用户希望在控制台中记录一些信息.信息可以是任何细节取决于目的.牢记我们正在使用Selenium进行测试,我们需要有助 ...
- Spring Cloud第十四篇 | Api网关Zuul
本文是Spring Cloud专栏的第十四篇文章,了解前十三篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring C ...
- “全栈2019”Java第八十四章:接口中嵌套接口详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- Egret入门学习日记 --- 第十四篇(书中 5.4~5.6节 内容)
第十四篇(书中 5.4~5.6节 内容) 书中内容: 总结 5.4节 内容重点: 1.如何编写自定义组件? 跟着做: 重点1:如何编写自定义组件? 文中提到了重要的两点. 好,我们来试试看. 第一步, ...
- 解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘(译)
解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘(译) http://improve.dk/how-are-vardecimals-stored/ 在这篇文章,我将深入研究 ...
- 第十四篇 Integration Services:项目转换
本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...
- Python之路【第十四篇】:AngularJS --暂无内容-待更新
Python之路[第十四篇]:AngularJS --暂无内容-待更新
- 第三百八十四节,Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册
第三百八十四节,Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册 基于类的路由映射 from django.conf.urls import url, incl ...
- 【译】第十四篇 Integration Services:项目转换
本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...
随机推荐
- Vue 3.0 有哪些新特性值得我们提前了解
一.迎接 Vue 3.0 简介 Vue.js 作者兼核心开发者尤雨溪宣布 Vue 3.0 进入 Beta 阶段. 已合并所有计划内的 RFC 已实现所有被合并的 RFC Vue CLI 现在通过 ...
- 设计模式-策略模式前端应用校验vue写法
1.定义:定义一系列算法,把它们一个个封装起来,并且它们可以相互替换 2.实际应用:减少if else的使用,在有多种算法相似的情况下,使用 if-else 所带来的复杂和难以维护,提高维护和可读性, ...
- SAP 文件操作类 CL_GUI_FRONTEND_SERVICES
1 .文件下载. DATA: l_filename TYPE string, "file name l_path TYPE string, "file path l_fullpat ...
- 【问题解决】Alpine镜像中执行jstack、arthas等命令提示Unable to get pid of LinuxThreads manager thread
问题现象 最近在处理项目上问题发现之前同事构建的AlpineLinux的镜像不能执行jstack等JDK命令,报错如下. Unable to get pid of LinuxThreads manag ...
- HTML知识点概括——一篇文章带你完全掌握HTML
HTML知识点概括 前端三件套分别是HTML3,CSS5,JavaScript 稍微介绍一下W3C标准: 结构化标准语言(HTML) 表现标准语言(CSS) 行为标准(DOM,JavaScript) ...
- 全国降雨侵蚀力因子R值
数据下载链接:百度云下载链接 降雨侵蚀力因子其实是反应降雨对土壤侵蚀的潜在能力,就是降雨的冲刷对土壤的侵蚀效应. 在过去几天查阅文献资料的过程中,本人亲眼看见过的关于因子R的计算方法就超过30种 ...
- Error Code: 1054. Unknown column '字段名' in 'field list'
问题描述: j博主在java开发过程中,通过读取excel中表名和字段名,动态创建insert的SQL语句,在mysql可视化工具中执行此SQL语句时,一直提示"Error Code: 10 ...
- cx_Oracle.DatabaseError: ORA-28759: failure to open file
找了好久这个问题,有人说是tcps的问题,需要自己生成证书什么的,后来才发现原来是 钱包文件路径 的问题,钱包文件解压后必须放在instantclien/network/admin下,在Windows ...
- Java开发学习(十二)----基于注解开发依赖注入
Spring为了使用注解简化开发,并没有提供构造函数注入.setter注入对应的注解,只提供了自动装配的注解实现. 1.环境准备 首先准备环境: 创建一个Maven项目 pom.xml添加Spring ...
- 5-2 Nacos注册中心
Nacos注册中心 什么Nacos Nacos是Spring Cloud Alibaba提供的一个软件 这个软件主要具有注册中心和配置中心的功能 我们先学习它注册中心的功能 微服务中所有项目都必须注册 ...