Vue基础案例三：购物车（组件化思想练习）
实现效果：
1.原始布局：
<div id="app">
<div class="container">
<div class='cart'>
<div class="title">我的商品div>
<div>
<div class="item">
<img src="img/a.jpg" />
<div class="name">div>
<div class="change">
<a href="">－a>
<input type="text" class="num" />
<a href="">＋a>
div>
<div class="del">×div>
div>
<div class="item">
<img src="img/b.jpg" />
<div class="name">div>
<div class="change">
<a href="">－a>
<input type="text" class="num" />
<a href="">＋a>
div>
<div class="del">×div>
div>
<div class="item">
<img src="img/c.jpg" />
<div class="name">div>
<div class="change">
<a href="">－a>
<input type="text" class="num" />
<a href="">＋a>
div>
<div class="del">×div>
div>
<div class="item">
<img src="img/d.jpg" />
<div class="name">div>
<div class="change">
<a href="">－a>
<input type="text" class="num" />
<a href="">＋a>
div>
<div class="del">×div>
div>
<div class="item">
<img src="img/e.jpg" />
<div class="name">div>
<div class="change">
<a href="">－a>
<input type="text" class="num" />
<a href="">＋a>
div>
<div class="del">×div>
div>
div>
<div class="total">
<span>总价：123span>
<button>结算button>
div>
div>
div>
div>
2.运用组件化思想划分独立的功能组件
js:
<script type="text/javascript">
//以下三个子组件都是局部组件
//子组件1：标题
var CartTitle = {
template: `
我的商品
`
}
//子组件2：列表
var CartList = {
template: `
`
}
//子组件3：计算总价
var CartTotal = {
template: `
总价：123
`
}
// 这里定义了一个全局组件（父组件）
Vue.component('my-cart', {
//模板串
template: `
html:
<div id="app">
<div class="container">
<my-cart>my-cart>
div>
div>
3.完成标题、列表、结算组件的数据展示（父组件向子组件传值）
//父组件
Vue.component('my-cart', {
//步骤一：在父组件中添加数据
data: function() {
return {
puname: '张三',
plist: [{
id: 1,
name: 'TCL彩电',
price: 1000,
num: 1,
img: 'img/a.jpg'
}, {
id: 2,
name: '机顶盒',
price: 1000,
num: 1,
img: 'img/b.jpg'
}, {
id: 3,
name: '海尔冰箱',
price: 1000,
num: 1,
img: 'img/c.jpg'
}, {
id: 4,
name: '小米手机',
price: 1000,
num: 1,
img: 'img/d.jpg'
}, {
id: 5,
name: 'PPTV电视',
price: 1000,
num: 2,
img: 'img/e.jpg'
}]
}
},
//模板串
template: `
4.删除（子组件向父组件传值）
需求：点击删除按钮，根据item.id找到item在list中的index，再进行删除
注意：数据的定义和操作都要求在父组件中进行，子组件只负责展示。这里的删除操作页面上处于子组件中，所以要向父组件传值，在父组件中进行操作数据。
//子组件2：列表
var CartList = {
props: ['list'],
template: `
`,
methods: {
del: function(id) {
//步骤二：通过$emit(arg1,arg2)触发事件
// 把id传递给父组件
//参数1：事件名称，参数二：要传递的数据
this.$emit('cart-del', id);
}
}
}
//父组件
Vue.component('my-cart', {
data:{
...省略..},
//模板串
template: `
5.列表组件中数量 (item.num) 更新后，总价格相应发生变化（子组件向父组件传值）
//子组件2：列表
var CartList = {
props: ['list'],
template: `
`,
methods: {
//步骤二：子组件中通过$emit(arg1,arg2)触发事件，向父组件传递信息
changeNum: function(id, event){
//event.target得到input标签
// console.log(id, event.target.value);
this.$emit('change-num', {
id: id,
num: event.target.value
});
}
}
}
//父组件
Vue.component('my-cart', {
data: {
...省略..},
//模板串
template: `
6.列表组件中加减数量相关操作（子组件向父组件传值）
//子组件2：列表
var CartList = {
props: ['list'],
template: `
`,
methods: {
//步骤二：子组件中通过$emit(事件名称,参数)触发事件，向父组件传递信息
sub: function(id) {
console.log(id);
this.$emit('cart-one', {
//传递的两个参数（对象形式）
id: id,
step: -1
});
},
add: function(id) {
console.log(id);
this.$emit('cart-one', {
id: id,
step: 1
});
}
}
}
//父组件
Vue.component('my-cart', {
data: {
...省略..},
//模板串
template: `