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

购物车案例——实现组件化布局

• 把静态页面转换成组件化模式
• 把组件渲染到页面上

这个案例主要是对组件化知识的应用，对如何注册组件、父子组件间相互传递数据等进行了一个实践。

通过父组件向子组件传递数据的方式，在父组件定义数据，然后将用户的动态名传递给子组件，在子组件中通过props属性来接收数据。

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>

1、 把静态页面转换成组件化模式

1.1 标题组件

 var CartTitle = {
      template: `
        <div class="title">我的商品</div>
      `
    }

1.2 商品列表组件

注意点 ： 组件模板必须是单个根元素

var CartList = {
      template: `
        <div>
          <div class="item">
            <img src="img/a.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/b.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/c.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/d.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/e.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
        </div>
      `
    }

1.3 商品结算组件

   var CartTotal = {
      template: `
        <div class="total">
          <span>总价：123</span>
          <button>结算</button>
        </div>
      `
    }

1.4 定义一个全局组件 my-cart

1.5 注册子组件

1.6 引入子组件

 Vue.component('my-cart',{
      ##  1.6 引入子组件  
      template: `
        <div class='cart'>
          <cart-title></cart-title>
          <cart-list></cart-list>
          <cart-total></cart-total>
        </div>
      `,
      # 1.5  注册子组件   
      components: {
        'cart-title': CartTitle,
        'cart-list': CartList,
        'cart-total': CartTotal
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {

      }
    });