本文已参与「新人创作礼」活动，一起开启掘金创作之路。

购物车案例——实现标题和结算功能组件

标题组件实现动态渲染

• 从父组件把标题数据传递过来，即父向子组件传值。

• 把传递过来的数据渲染到页面上。

结算功能组件

• 从父组件把商品列表list 数据传递过来 即 父向子组件传值。

• 把传递过来的数据计算最终价格渲染到页面上。

本篇重点：父子组件间相互传递数据。

html 代码结构

 <div id="app">
    <div class="container">
      <!-- 把组件渲染到页面上 --> 
      <my-cart></my-cart>
    </div>
  </div>

js 代码结构

  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
      code in here
  </script>

2、 实现标题和结算功能组件

2.2  标题组件    

子组件通过 props 形式接收父组件传递过来的 uname 数据。

   var CartTitle = {
     props: ['uname'],
     template: `
       <div class="title">{{uname}}的商品</div>
     `
   }

2.3  商品结算组件  

子组件通过 props 形式接收父组件传递过来的 list 数据。

    var CartTotal = {
      props: ['list'],
      template: `
        <div class="total">
          <span>总价：{{total}}</span>
          <button>结算</button>
        </div>
      `,

2.4 计算商品的总价，并渲染到页面上

     computed: { 
       total: function() {
         var t = 0;
         this.list.forEach(item => {
           t += item.price * item.num;
         });
         return t;
       }
     }
   }
   Vue.component('my-cart',{
     data: function() {
       return {
         uname: '张三',
         list: [{
           id: 1,
           name: 'TCL彩电',
           price: 1000,
           num: 1,
           img: 'img/a.jpg'
         },{
           id: 2,
           name: '机顶盒',
           price: 1000,
           num: 1,
           img: 'img/b.jpg'
         },{
           id: 3,
           name: '海尔冰箱',
           price: 1000,
           num: 1,
           img: 'img/c.jpg'
         },{
           id: 4,
           name: '小米手机',
           price: 1000,
           num: 1,
           img: 'img/d.jpg'
         },{
           id: 5,
           name: 'PPTV电视',
           price: 1000,
           num: 2,
           img: 'img/e.jpg'
         }]
       }
     },

2.1  父组件向子组件以属性传递的形式 传递数据

• 向标题组件传递 uname 属性；  
• 向商品结算组件传递 list  属性  ；

      template: `
        <div class='cart'>
          <cart-title :uname='uname'></cart-title>
          <cart-list></cart-list>
          <cart-total :list='list'></cart-total>
        </div>
      `,
      components: {
        'cart-title': CartTitle,
        'cart-list': CartList,
        'cart-total': CartTotal
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
​
      }
    });
​
  </script>
​