2018-09-20用vue.js组件父给子传值实现购物车效果

效果图：

body部分：

 <div class="container">

    <father></father>
   
 </div>

js部分：

<script src="js/vue.js"></script>
<script>
    
    //父组件
    
    Vue.component('father',{
        template:`
                <table class="table table-bordered table-hover text-center">
                    <thead>
                    <tr>
                        <th class="text-center">编号</th>
                        <th class="text-center">名称</th>
                        <th class="text-center">单价</th>
                        <th class="text-center">数量</th>
                        <th class="text-center">小计</th>
                    </tr>
    
                </thead>
                    <child-one v-bind:fruit='fruitList'></child-one>
                </table>
           `
         ,
        data:function(){
            return{
                fruitList:[
                    {uname:'苹果',price:3,count:1,xj:3},
                    {uname:'香蕉',price:2,count:1,xj:2},
                    {uname:'鸭梨',price:1,count:1,xj:1}
                ]
               
            }
        }
    })

子组件tbody部分：

 //  tbody  子组件
    Vue.component('child-one',{
        props:['fruit'],
        template:`
                <tbody>
                    <tr v-for="(value,index) in fruit">
                        <td>{{index+1}}</td>
                        <td>{{value.uname}}</td>
                        <td>{{value.price}}</td>
                        <td>
                           
                            <button @click='res(index)'>-</button>
                            <span> {{value.count}}</span>
                           
                            <button @click='add(index)'>+</button>
    
                        </td>
                        <td>{{value.xj}}</td>
    
                    </tr>
                    <tr>
                        <td colspan="5">总价:{{total}}</td>
                    </tr>
                </tbody>
        `,
        data:function(){
            return{
                total:6
            }
        },
        methods:{
    //    数量减
            res:function(index){
                if(this.fruit[index].count>1){
                    this.fruit[index].count--;
                }
         // 小计减
                    this.fruit[index].xj=this.fruit[index].price*this.fruit[index].count;
                    this.getToal();
            },
   //   数量加
            add:function(index){
                this.fruit[index].count++;
   //  小计加
                this.fruit[index].xj=this.fruit[index].price*this.fruit[index].count;
                 this.getToal();
            },
  //  总价
            getToal:function(){
                for(var i=0,sum=0;i<this.fruit.length;i++){
                    sum+=this.fruit[i].xj;
                }
                this.total=sum
            }
            
        }
    })

new Vue({
        el:'.container'
    })