基于webpack的vue案例-水果超市
- 项目成品截图
- 文件目录
主要文件即红圈里的
- 逻辑思路
父组件的数据在子组件上渲染,点击子组件的对应button,商品库存-1,购物车+1,总价++, - 学到的知识点
父子组件如何通信
1.如何在子组件上操作父组件的方法,以及数据
A:
先 -->在父组件内先创建好函数方法,然后调用子组件时在子组件标签上用v-on常规使用,
后 -->子组件内使用$emit('父组件对应方法名称,'传递的参数')
传递的参数可以是数组格式
这两步必须都写
这是我第一个案例意味着知识面和使用的方法都很局限,可能这种通讯方式不是最优的但目前我只了解到了这种,期待发现更多优雅的通讯方式
<!--父组件文件
Show是子组件 -->
<Show
v-on:onAddGoods="onAddGoods"
v-on:onSubtract="onSubtract"
/>
<!-- Show子组件文件-->
<div>
<button
v-on:click="$emit('onAddGoods',[good.price,good.id])" >+</button>
<button
v-on:click="$emit('onSubtract',[good.price,good.id])">-</button>
</div>
2.父组件给子组件传递参数的正确写法
头次写时把要传给子组件的参数写在了子组件外层的div上,所以一直获取不到数据哈哈
最后才反应过来应该写在引用的子组件标签上
- 详细代码
<!-- Show.vue-->
<template>
<div id="show">
<span>{{good.name}}</span>
<span>单价:{{good.price}} ¥</span>
<span>库存:{{good.maxkc}} 斤 | 剩余{{good.kucun}}</span>
<span>加入购物车:{{good.buy}}</span>
<van-button v-on:click="$emit('onAddGoods',[good.price,good.id])" v-bind:disabled="good.kucun==0? true:false" plain type="primary">+</van-button>
<van-button v-on:click="$emit('onSubtract',[good.price,good.id])" v-bind:disabled="good.buy==0?true:false" plain type="primary">-</van-button>
</div>
</template>
<script>
export default{
name:'Show',
props:{
good:{
name:String,
price:Number,
kucun:Number
},
},
components:{ },
data(){
return{
}
}
}
</script>
<style scoped>
#show{padding: 20px; border: 1px solid #4385c7; width: 800px; text-align: left;display: flex;justify-content:space-between;}
#show span:nth-child(1){ width: 15%;}
#show span:nth-child(2){width: 20%;}
#show span:nth-child(3){width: 30%;}
#show span:last-child(2){ width: 10%;}
#show span:last-child{width: 10%; margin-right: 10px;}
#show>div{ font-size: 20px;color: rgb(88, 90, 194); display: inline-block;}
p{font-size: 12px;}
button{ height: 25px;width: 30px !important; text-align: center;}
</style>
<!-- App.vue-->
<template>
<div id="app">
<img src="./assets/leaf.png">
<TitleGood/>
<div class="showBox">
<Show v-for="item in goods" :key="item.name" v-bind:good="item" v-on:onAddGoods="onAddGoods" v-on:onSubtract="onSubtract"/>
</div>
<!-- -->
<p>总计:{{sum}}</p>
</div>
</template>
<script>
import Show from './components/Show.vue';
import TitleGood from './components/TitleGood.vue';
export default {
components:{
TitleGood,
Show,
},
name: 'App',
data(){
return{
sum:0,
goods:[
{name:'apple',price:15,kucun:20,maxkc:20,buy:0,id:1},
{name:'orange',price:10,kucun:100,maxkc:100,buy:0,id:2},
{name:'banner',price:4,kucun:60,maxkc:60,buy:0,id:3},
{name:'lemon',price:6,kucun:90,maxkc:90,buy:0,id:4},
]
}
},
methods:{
onAddGoods:function(item){
// 库存-1,购物车+1,总计++
let index = item[1]-1;
let good = this.goods[index];
if(good.kucun){
good.buy +=1;
good.kucun -=1;
this.sum += item[0];
}else{
// 库存为0什么都不做
//button样式禁用
}
},
onSubtract:function(item){
// 库存+1,购物车-1,总计--
let index = item[1]-1;
let good = this.goods[index];
if(good.kucun<=good.maxkc){
good.buy -=1
good.kucun +=1;
this.sum -=item[0];
}
}
}
}
</script>
<style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
text-align: center; color: #2c3e50;margin-top: 60px;}
#app img{width: 40px;height: 40px;}
.showBox{display: inline-block;color: #4385c7;}
p{margin: 0 auto;color: #4385c7;line-height: 40px;border: 1px solid #4385c7; width: 842px;}
</style>
main.js
初始状态,没有修改所以没有贴过来
TitleGood
组件就是一句话标题所以也没贴过来
- gthup地址
vue专题还没有建仓库所以后期记得的话在补链接,真有需要的可以留言(哈哈这是我小白练手的)