友情提示一下:前面的图书管理没整明白的看这个章节就会有点晕
组件和组件之间的数据传输没整明白也会有点晕
组件都没整明白的同学放弃看这个案例哈
为什么还要处理呢?
因为我们父组件上展示的数据,一般不会在子组件上,而是在父组件上,然后子组件调用父组件的数据
父组件标签绑定属性
子组件使用props
总价:
商品展示-----删除功能
商品展示------输入框手动修改
ok,给大家整理了一下,其实并不难是不是
以下是全部代码
-----------------------------------------------------
var productTitle={
props:["uname"],
template:`
{{uname}}的商品
`,
}
var productList={
props:["lists"],
template:`
{{item.name}}
单价:¥{{item.price}}
`,
methods:{
//删除商品
del(id){
// 删除操作应该在父组件当中进行处理
// 不推荐在子组件中直接处理props当中的数据
// 应该通知父组件去做这个删除操作
// 把id传递给父组件
//通过自定义事件的方式
this.$emit('product-del',id)
},
//修改商品的数量
changeNum(id,event){
this.$emit("change-num",{id:id,num:event.target.value,type:"change"})
},
// 减号按钮
sub(id){
//因为都是change-nums事件,所以我们自定易一个type类型区分一下
this.$emit("change-num",{id:id,type:"change-sub"})
},
// 加号按钮
add(id){
this.$emit("change-num",{id:id,type:"change-add"})
},
}
}
var productTotal={
props:["lists"],
template:`
总价:{{total}}
`,
computed:{
total(){
var t=0;
// forEach方法中的function回调有三个参数:
// 第一个参数是遍历的数组内容,
// 第二个参数是对应的数组索引,
// 第三个参数是数组本身
this.lists.forEach(function(item){
t += item.price * item.num
})
return t;
}
}
}
Vue.component("my-pruducts",{
data(){
return {
uname:"阿娇",
lists:
[
{id:1,imgUrl:"../imgs/1.png",name:"厨具用刀",price:188,num:1},
{id:2,imgUrl:"../imgs/2.png",name:"男士皮带",price:299,num:1},
{id:3,imgUrl:"../imgs/3.png",name:"男士钱包",price:280,num:1},
{id:4,imgUrl:"../imgs/4.png",name:"女士斜挎包1",price:150,num:1},
{id:5,imgUrl:"../imgs/5.png",name:"女士斜挎包2",price:200,num:1},
{id:6,imgUrl:"../imgs/6.png",name:"儿童小玩具",price:288,num:1},
]
}
},
template:`
`,
components:{
"product-title":productTitle,
"product-list":productList,
"product-total":productTotal,
},
methods:{
productDel(id){
//删除的方法有很多,这只是其中一种,也可以使用splice()
this.lists=this.lists.filter(function(item){
return item.id !=id
})
},
changeNum(val){
// 分为三种情况,数据进行变更
// 输入框本身,加号,减号
if(val.type=="change"){
//根据子组件传递过来的数据,更新列表当中的数据
//使用some方法(干遍历用的,详情搜索js,some())
this.lists.some(item=>{
if(item.id==val.id){
item.num=val.num;
return true;//找到对应的数据之后终止循环
}
})
}else if(val.type=="change-sub"){
this.lists.some(item=>{
if(item.id==val.id && item.num>=1){
item.num--
return true;//找到对应的数据之后终止循环
}
})
}else if(val.type=="change-add"){
this.lists.some(item=>{
if(item.id==val.id){
item.num ++
return true;//找到对应的数据之后终止循环
}
})
}else{alert("您处理商品数量的方式不正确")}
}
},
})
var vm=new Vue({
el:"#app",
data:{
}
})