您的位置：首页 > Web前端 > Vue.js
VUE 父子组件双向数据绑定购物车

2018-05-07 17:36 686 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/vue.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#app{
text-align: center;
}
tr{
border: 1px solid #000;
line-height: 5rem;
}
td{
border: 1px solid #000;
line-height: 5rem;
}
hr{
border-bottom: 1px solid #000;
}
h2{
width: 100%;
height: 5rem;
line-height: 5rem;
text-align: center;
}
.box1{
width: 100%;
}
ul{
width: 100%;
display: flex;
height: 5rem;
line-height: 5rem;
}
li{
width: 25%;
text-align: center;
list-style: none;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="app">
<!--父-->
<fu-zj :list="list" :flag="falg" :abou="abou"></fu-zj>
<!--子-->
<zi-zj :list="list" :flag="falg" :abou="abou"></zi-zj>
</div>
<script>
// <!--父组件-->
Vue.component("fu-zj",{
props:['list','flag','abou'],
template:`<div>
        <h2>购物车</h2>
        <table class="table table-bordered table-hover">
            <tr>
                <th>id</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>Actions</th>
            </tr>

            <tr v-for="(key,index) in list">
                <td>{{key.id}}</td>
                <td>{{key.mc}}</td>
                <td>￥{{key.jg}}</td>
                <td>{{key.sl}}</td>
                <td>
                    <button  class="btn btn-primary"
                    @click="tjgwc(key)"
                   v-show="!key.flag"
                    @click="send(key)">{{key.ac}}</button>
                    <div v-show="key.abou" >
                          <button @click="jia(key)" class="btn btn-primary">+</button>
                         <button @click="jian(key)" class="btn btn-primary">-</button>
                    </div>
                </td>
            </tr>
        </table>
        <button class="btn btn-primary"  colspan="5">购物车信息</button>
    </div>`,
methods:{
//    添加购物车
tjgwc(key){
key.flag=!key.flag
                key.abou=!key.abou
                key.sl++
},
//发送到子级
send(key){
bust.$emit('key',key);
},
//加
jia(key){
key.sl++;
console.log(key.sl)
},
//减
jian(key){

if(key.sl>1){
key.sl--;
}else{
key.sl=0;
key.flag=!key.flag
                    key.abou=!key.abou

                }
}

}
})
//子组件
Vue.component('zi-zj',{
props:['list','falg','abou'],
data(){
return{
arr:[]
}
},
template:` <div>
        <hr/>
        <h2>购物车</h2>
        <table class="table table-bordered table-hover">
            <tr>
                <th>id</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>总价</th>
                <th>Actions</th>
            </tr>
            <tr v-for="(key,index) in arr">
                <td>{{key.id}}</td>
                <td>{{key.mc}}</td>
                <td>￥{{key.jg}}</td>
                <td>{{key.sl}}</td>
                <td>{{key.jg*key.sl}}</td>
                <td>
                    <input class="btn btn-default a" type="button" value="+" @click="jia(key)">
                    <input class="btn btn-default a" type="button" value="-" @click="jian(key)">
                    <input class="btn btn-default a" type="button" value="x" @click="del(key)">
                </td>
            </tr>
            <tr>
                <td>总数: {{sumCount()}} </td>
                <td>总价: ￥{{sumPrice()}} </td>
                <td colspan="6">
                <button class="btn btn-default a"
                @click="qk">清空购物车</button>
                </td>
            </tr>
        </table>
    </div>`,
//监听
watch:{
arr:{
handler(){
this.arr.forEach((res,index)=>{
if(res.sl == 0){
this.arr.splice(index,1);
}
})
},
deep: true
            }
},
methods:{
//加
jia(key){
key.sl++;
},
//减
jian(key){
if(key.sl>1){
key.sl--;

}else{
key.sl=0
key.flag=!key.flag
                    key.abou=!key.abou
                    this.arr.splice(key,1)
}
},
//删除
del(key){
if(confirm("亲 , 确认要删除嘛 ？")){
this.arr.splice(key,1)
key.flag=!key.flag
                    key.abou=!key.abou
                }
}  ,
//清空
qk(){
if(confirm("小主 , 确认清空嘛 ？")) {
this.arr.forEach((res,index)=>{
res.sl = '';
res.flag=!res.flag
                        res.abou=!res.abou
                    })
}
},
//总价
sumPrice(){
let sum = 0
for(var key of this.list){
sum +=key.jg*key.sl
                }
return sum
},
//总数
sumCount(){
let sum = 0
for(let key of this.list){
sum += key.sl
                }
return sum
} ,
},
created(){
let that=this;
bust.$on('key',function(key){
//这里的this指向的是bus，所以只能用that
console.log(key)
that.arr.push(key)/*把key对象里东西push到arr空数组里*/
});
}
})

let bust=new Vue();

//初始化
new Vue({
el:"#app",
data:{
list:[{
"id":"0",
"jg":"8340",
"mc":'iphone X',
"sl":0,
"ac":"添加到购物车",
"zj":0,
falg:false,
abou:false
                },
{
"id":"1",
"jg":"2345",
"mc":'华为 麦芒陆',
"sl":0,
"ac":"添加到购物车",
"zj":0,
falg:false,
abou:false
                },
{
"id":"2",
"jg":"4340",
"mc":'小米 Max2',
"sl":0,
"ac":"添加到购物车",
"zj":0,
falg:false,
abou:false
                },
{
"id":"3 ",
"jg":"6340",
"mc":'华为 Mate 10',
"sl":0,
"ac":"添加到购物车",
"zj":0,
falg:false,
abou:false
                }],
falg:false,
abou:false
        },
methods:{

}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航
VUE 父子组件 双向数据绑定 购物车

VUE 父子组件双向数据绑定购物车
