vue组件化实现购物车案例
这个案例主要是对组件化知识的应用,如何注册组件、父子组件间相互传递数据等有了一个实践。案例一共分为三个组件,分别为标题组件、列表组件、结算组件。首先是写一个静态页面,然后根据静态页面来进行组件化划分。如下图所示:标题组件:通过父组件向子组件传递数据的方式,在父组件定义数据,然后将用户的动态名传递给子组件,在子组件中通过props属性来接收数据。列表组件:实现的功能主要有三个:①渲染价格功能:也是通
这个案例主要是对组件化知识的应用,如何注册组件、父子组件间相互传递数据等有了一个实践。
案例一共分为三个组件,分别为标题组件、列表组件、结算组件。
首先是写一个静态页面,然后根据静态页面来进行组件化划分。
如下图所示:
-
标题组件:通过父组件向子组件传递数据的方式,在父组件定义数据,然后将用户的动态名传递给子组件,在子组件中通过props属性来接收数据。
-
列表组件:实现的功能主要有三个:
①渲染价格功能:也是通过父组件向子组件传递数据,将父组件中的list数据中的price渲染到列表中;
②删除商品功能:通过点击×号可以进行删除,通过自定义事件的方式将点击的id号传递给父组件,然后在父组件中将根据获得的id来进行删除,主要用到findIndex()
方法来寻找索引,以及splice()
方法来进行删除数组对象;
③修改商品数量功能:可以直接输入数量或者点击加减号来进行修改,首先是直接在表单中输入数量方式来进行修改,是通过自定义事件的方式将修改的商品的id和表单中的值传递给父组件,然后在父组件中根据id进行修改;点击加减号也是应用同样的方法,在子组件中自定义事件将id号传递给父组件,在父组件中进行加减商品数量; -
结算组件:定义一个计算属性total来进行计算所有商品的总价。
详细代码
(1)HTML结构:
<div id="app">
<div class="container">
<my-cart></my-cart>
</div>
</div>
(2)CSS样式结构:
<style>
* {
padding: 0;
margin: 0
}
a {
text-decoration: none;
}
.container {
width: 500px;
margin: 10px auto;
}
.title {
width: 500px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
background-color: paleturquoise;
}
.item {
position: relative;
height: 50px;
border-bottom: 1px solid paleturquoise;
}
.item img {
float: left;
width: 100px;
height: 50px;
}
.item .price {
position: absolute;
float: left;
width: 120px;
margin-left: 10px;
top: 15px;
left: 100px;
}
.item .change {
position: absolute;
left: 220px;
top: 15px;
float: left;
width: 200px;
}
.change a {
float: left;
display: block;
width: 20px;
height: 20px;
font-size: 18px;
text-align: center;
line-height: 20px;
background-color: #ccc;
}
.change input {
float: left;
width: 50px;
margin: 0 5px;
}
.item .del {
position: absolute;
top: 8px;
left: 420px;
color: red;
font-size: 24px;
}
.item .del:hover {
top: 0;
height: 50px;
background-color: aquamarine;
}
.total {
position: relative;
width: 500px;
height: 50px;
background-color: sandybrown;
}
.total span {
position: absolute;
top: 14px;
left: 250px;
}
.total span em {
color: red;
font-style: normal;
font-size: 20px;
}
.total button {
position: absolute;
top: 8px;
left: 400px;
width: 50px;
height: 35px;
border-radius: 25%;
border: none;
outline: none;
background-color: tomato;
}
</style>
(3)js代码结构:
<script src="js/vue.js"></script>
<script>
// 三个子组件
var CartTitle = {
props: ['uname'],
template: `<div class="title">{{uname}}的商品</div>`
}
var CartList = {
props: ['list'],
template: ` <div class="list">
<div class="item" :key="item.id" v-for="item in list">
<img :src="item.img" alt="">
<div class="price">{{item.price}}¥/件</div>
<div class="change">
<a href="" @click.prevent="sub(item.id)">-</a>
<input type="text" class="num" :value="item.num" @blur="changenum(item.id,$event)">
<a href="" @click.prevent="add(item.id)">+</a>
</div>
<div class="del" @click="del(item.id)">×</div>
</div>
</div>
`,
methods: {
// 向父组件传递需要删除的id
del: function(id) {
// console.log(id);
this.$emit("del-cart", id);
},
// 修改表单输入的数量
changenum: function(id, event) {
//console.log(id, event.target.value);
// 向父组件传递然后再修改数量
this.$emit('change-num', {
id: id,
num: event.target.value
})
},
// 点击减号按钮
sub: function(id) {
this.$emit('sub-num', id);
},
//点击加号按钮
add: function(id) {
this.$emit('add-num', id);
}
}
}
var CartTotal = {
props: ['list'],
template: `<div class="total">
<span>总价:<em>{{total}}</em>¥</span>
<button>结算</button>
</div>`,
computed: {
total: function() {
var sum = 0;
this.list.forEach(item => {
sum += item.price * item.num;
});
return sum;
}
}
}
// 定义父组件
Vue.component('my-cart', {
data: function() {
return {
uname: '蜗牛大哥',
list: [{
id: 1,
name: 'Nike鞋子',
price: 460,
num: 1,
img: 'images/nike.jpg'
}, {
id: 2,
name: 'TCL彩电',
price: 2800,
num: 1,
img: 'images/OIP.jpg'
}, {
id: 3,
name: 'iphone手机',
price: 5000,
num: 1,
img: 'images/phone.jpg'
}, {
id: 4,
name: 'vivo手机',
price: 3500,
num: 1,
img: 'images/vivo.jpg'
}]
}
},
template: `<div class="mycart">
<cart-title :uname="uname"></cart-title>
<cart-list :list="list" @del-cart="delcart($event)" @change-num="changeNum($event)" @sub-num="subnum($event)" @add-num="addnum($event)"></cart-list>
<cart-total :list="list"></cart-total>
</div>`,
components: {
'cart-title': CartTitle,
'cart-list': CartList,
'cart-total': CartTotal,
},
methods: {
delcart: function(id) {
// 根据id删除list中对应的数据
// 1.找到id对应数据的索引
var index = this.list.findIndex(item => {
return item.id == id;
});
// 2.根据索引删除对应的数据
this.list.splice(index, 1);
},
// 根据id修改list中的数量num
changeNum: function(val) {
//console.log(val);
this.list.some(item => {
if (item.id == val.id) {
item.num = val.num;
}
})
},
//减号减少num
subnum: function(event) {
// console.log(event); event是点击的id号
this.list.some(item => {
if (item.id == event && item.num > 0) {
item.num--;
}
})
},
// 加号增加num
addnum: function(event) {
this.list.some(item => {
if (item.id == event) {
item.num++;
}
})
}
}
});
var vm = new Vue({
el: "#app",
data: {
}
});
</script>
继续冲冲冲鸭~
更多推荐
所有评论(0)