Vue实现简易购物车父子组件传值

最新推荐文章于 2022-12-04 13:06:04 发布

大补bu

最新推荐文章于 2022-12-04 13:06:04 发布

阅读量943

点赞数 1

分类专栏： vue学习笔记

本文链接：https://blog.csdn.net/qq_31068787/article/details/106407267

版权

vue学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 200px;
            margin: 0 auto;
        }
        .title,.footer{
            background-color: #eee;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        .footer span{
            color: red;
        }
        .footer  button{
            width: 60px;
            height: 30px;
            margin: 0 10px;
        }
        .item{
            height: 55px;
            line-height: 55px;
            position: relative;
            vertical-align: middle;
        }
        .item .name{
            position: absolute;
            left: 10px;
            top: 0;
        }
        .item .change{
            position: absolute;
            right: 30px;
            top: 0;

        }
        .change input {
            width: 40px;
            text-align: center;
        }
        .change a{
            text-decoration: none;
            font-size: 22px;
            color: #000;
        }
        .item .remove{
            position: absolute;
            top: 0;
            right: 0;
            font-size: 25px;
            color: red;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div id="app">
        <my-cart></my-cart>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let CartTitle = {
        template:`
        <div class="title">购物车</div>
        `
    }
    let CartFooter = {
        props:['list'],
        template:`
        <div class="footer">
            <span>金额：{{getSum}}</span>
            <button>结算</button>
        </div>
        `,
        computed: {
            getSum(){
                let sum = 0
                this.list.some(item =>{
                    sum += item.price * item.num
                })
                return sum
            }
        },
    }
    let CartList = {
        props:['list'],
        template:`
        <div>
            <div class="item" :key="item.id" v-for="item in list">
            <div class="name">{{item.uname}}</div>
            <div class="change">
                <a href="JavaScript:;" @click="sub(item.id)">-</a>
                <input type="text" class="num" v-model="item.num" @blur="changeNum(item.id,$event)" />
                <a href="JavaScript:;" @click="add(item.id)">+</a>
            </div>
            <div class="remove" @click="del(item.id)">×</div>
        </div>
        </div>
        `,
        methods: {
            //商品删除按钮
            del(id){
                this.$emit('del-cart',id)
            },
            //商品增加按钮
            add(id){
                this.$emit('change-num',{
                    id:id,
                    flag:'add'
                })
            },
            //商品减少按钮
            sub(id){
                this.$emit('change-num',{
                    id:id,
                    flag:'sub'
                })
            },
            //表单发生改变
            changeNum(id,event){
                this.$emit('change-num',{
                    id:id,
                    flag:'change',
                    num:event.target.value
                })
            }
        }
    }


    Vue.component('my-cart',{
        template:`
            <div class="wrap">
                <cart-title></cart-title>
                <cart-list :list="list" @del-cart="delCart" @change-num="changeNum"></cart-list>
                <cart-footer :list="list"></cart-footer>
            </div>
        `,
        data(){
            return{
                //商品数据表
                list:[{
                    id:1,
                    uname:'华为P30',
                    price:3000,
                    num:1
                },{
                    id:2,
                    uname:'小米10',
                    price:2000,
                    num:1
                },{
                    id:3,
                    uname:'扫地机',
                    price:500,
                    num:1
                },{
                    id:4,
                    uname:'电视剧',
                    price:1000,
                    num:1
                }]
            }
        },
        methods: {
            delCart(id){
                //拿到子组件想要删除的商品id
                let cartId =  this.list.findIndex(item =>{
                    return item.id === id
                })
                this.list.splice(cartId,1)
            },
            //修改商品数量方法
            changeNum(obj){
                if(obj.flag ==='add'){
                    this.list.some(item =>{
                        if(item.id === obj.id){
                            item.num++
                            return true
                        }
                    })
                }else if(obj.flag === 'sub'){
                    this.list.some(item =>{
                        if(item.id === obj.id){
                            item.num >0 ?item.num-- :0
                            return true
                        }
                    })
                }else if(obj.flag === 'change'){
                    this.list.some(item =>{
                        if(item.id === obj.id){
                            item.num = obj.num
                            return true
                        }
                    })
                }
            }
        },
        components:{
            'cart-title':CartTitle,
            'cart-footer':CartFooter,
            'cart-list':CartList
        }
    })
    new Vue({
        el:'#app'
    })
    
</script>
</html>

大补bu

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue实现简易购物车父子组件传值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrap{
复制链接

扫一扫