技術標籤：Vue

文章目錄

• • • • • 1. 父元件
        • 2. 子元件

1. 父元件

<template>
  <div id="app">
    <div class="container">
      <div class="cart">

        <Header></Header>
        <!-- $event 接受子元件傳過來的引數 -->
        <List :list="list"
 
 @del="del($event)" @changeNum="changeNum($event)"></List>
        <Footer :list="list"></Footer>

      </div>
    </div>
  </div>


</template>

<script>
    import Header from "./components/Header";
    import List from
 
 "./components/List";
    import Footer from "./components/Footer";

    export default {
        components:{
            Header, List, Footer
        },

        data(){
            return{
                list: [
                    {
                      id: 1,
                      name:
 
 'TCL彩電',
                      price: 1000,
                      num: 1,
                      img: require('./img/a.jpg')
                    },
                    {
                      id: 2,
                      name: '機頂盒',
                      price: 1000,
                      num: 1,
                      img: require('./img/b.jpg')
                    },
                    {
                      id: 3,
                      name: '海爾冰箱',
                      price: 1000,
                      num: 1,
                      img: require('./img/c.jpg')
                    },
                    {
                      id: 4,
                      name: '小米手機',
                      price: 1000,
                      num: 1,
                      img: require('./img/d.jpg')
                    },
                    {
                      id: 5,
                      name: 'PPTV電視',
                      price: 1000,
                      num: 2,
                      img: require('./img/e.jpg')
                    }
                      ]
            }
        },
        methods:{
            // 刪除邏輯
            del(id){
                const index = this.list.findIndex(item=>{
                    return item.id === id;
                });
                this.list.splice(index, 1)
            },
            // 修改商品數量(直接修改，加，減)
            changeNum(value){
                // 獲取子元件引數
                const {id,val, type} = value;
                // 對應商品索引
                const index = this.list.findIndex(item=>{
                    return item.id===id
                });
                // 判斷型別
                if(type==='change'){
                    this.list[index].num = val
                }else{
                    this.list[index].num += val
                }

            }
        }
    }
</script>

<style type="text/css">
  .container {
  }

  .container .cart {
    width: 300px;
    margin: auto;
  }

  .container .title {
    background-color: lightblue;
    height: 40px;
    line-height: 40px;
    text-align: center;
    /*color: #fff;*/
  }

  .container .total {
    background-color: #FFCE46;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }

  .container .total button {
    margin: 0 10px;
    background-color: #DC4C40;
    height: 35px;
    width: 80px;
    border: 0;
  }

  .container .total span {
    color: red;
    font-weight: bold;
  }

  .container .item {
    height: 55px;
    line-height: 55px;
    position: relative;
    border-top: 1px solid #ADD8E6;
  }

  .container .item img {
    width: 45px;
    height: 45px;
    margin: 5px;
  }

  .container .item .name {
    position: absolute;
    width: 90px;
    top: 0;
    left: 55px;
    font-size: 16px;
  }

  .container .item .change {
    width: 100px;
    position: absolute;
    top: 0;
    right: 50px;
  }

  .container .item .change a {
    font-size: 20px;
    width: 30px;
    text-decoration: none;
    background-color: lightgray;
    vertical-align: middle;
  }

  .container .item .change .num {
    width: 40px;
    height: 25px;
  }

  .container .item .del {
    position: absolute;
    top: 0;
    right: 0px;
    width: 40px;
    text-align: center;
    font-size: 40px;
    cursor: pointer;
    color: red;
  }

  .container .item .del:hover {
    background-color: orange;
  }
</style>

2. 子元件

頭部

<template>
  <div class="title">我的商品</div>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style scoped>

</style>

列表部分

<template>
  <div>
    <div class="item" v-for="item in list">
      <img :src="item.img">
      <div class="name"> {{ item.name }} </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>
</template>

<script>
    export default {
        name: "List",
        props:['list'],
        methods:{
          del(id){
              this.$emit('del', id)
          },
            changeNum(id, event){
                this.$emit('changeNum', {id:id, val:event.target.value, type:'change'})
            },
            add(id){
                this.$emit('changeNum', {id:id, type:'add', val:1})
            },
            sub(id){
                this.$emit('changeNum', {id:id, type:'sub', val:-1})
            }
        }
    }
</script>

<style scoped>

</style>

尾部

<template>
  <div class="total"><span>總價：{{ sum }}</span>

  </div>
</template>

<script>
    export default {
        name: "Footer",
        props:['list'],
        computed:{
          sum(){
              let sumPrice = 0;
              this.list.forEach((item)=>{
                sumPrice += item.price * item.num
              });
              return sumPrice
          }
        }

    }
</script>

<style scoped>

</style>