六、vue的另一个核心：组件

vue有两大核心：数据驱动和组件。
组件是人为地把页面合理地拆分成一个个区块，让这些区块更方便重复使用，有了组件，可以更高效合理地开发和维护项目。

一、规划组件

规划组件

上图中 橙色框框区块看作一个组件来进行规划，这样就方便复用这个组件；

二、规划组件

用传统的实现方式一个组件，html代码如下：

<div class="rbzzx_sale_end_con">
    <div>
        <span class="rbzzx_sale_end_con_img"><a href="javascript:;">< img src="images/armed_app45.png" /></a></span>
        <div class="rbzzx_sale_end_con_txt">
            <h5><a href="javascript:;">精选牛肉精选牛肉精选牛肉</a></h5>
            <p class="p1">特卖价：<b>¥56800</b></p>
            <p class="p2">原价：¥76000</p>
            <a href="javascript:;" class="rbzzx_sale_end_btn">
                <cite>即将开始</cite>
                <input type="button" />
            </a>
        </div>
    </div>
</div>

释： class为unit的<div>容器以及它的子孙节点组成了组件。在vue组件中，这些代码将作为组件的模板template。

看看vue如何实现一个组件的：

1、先创建一个vue实例:

<div id="app"></div>
<script>
   new Vue({
       el:"#app",
    });
</script>

释： 成功创建了一个vue实例vm，挂载元素为id为app的div节点。

2、在创建实例vm之前，利用vue提供的API来注册一个组件。修改一下上面的代码：

<div id="app">
   <my-list></my-list>
</div>
<script>
    Vue.component('my-list',{
        template:`
        <div>
          <span><a>< img src="../images/bird1.png" /></a></span>
          <div>
            <h5><a>精选牛肉精选牛肉精选牛肉</a></h5>
            <p>特卖价：<b>¥56800</b></p>
            <p><a>原价：¥76000</a></p>
            <cite>已结束</cite>
          </div>
      </div>`
    });

    let vm = new Vue({
        el:"#app",
    });
</script>

释：使用了vue提供的全局API Vue.component() ，注册了一个名为：“my-list”的组件，而组件的template正好是我们上面的html代码，这样，我们就可以用 <my-list></ my-list> 的方式来使用我们的组件。
注：注意：一定要确保实例vm在创建之前， <my-list> 组件已经被成功注册，这也是为什么我们要把代码写在实例化之前。

3、注册了组件 <my-article> ，使用这个自定义的组件：

<div id="app">
    <my-list></my-list>
</div>

自定义组件

释：看到最终渲染的不是标签<my-list><my-list>，而是组件的模板template的值。表示成功地注册一个自定义的组件并使用它。

4、怎么实现传参？

每件拍品的图片、标题、价格、状态都不一样，如何动态地展示它们的数据呢？涉及到了组件的传参props，不但函数可以接受参数，vue的组件也可以。

(1) 把数据存储在实例vm的data中：

new Vue({
  el:"#app",
  data:{
    akm_pp:
      {
       img_url:"../images/bird1.png",
       title:"精选牛肉精选牛肉精选牛肉",
       sale_price:"¥56800",
       org_price:"原价：¥76000",
       state:"立即购买",
       ended:false,
      }
})

(2) 信息有了，传到组件中:

<div id="app">
    <my-list :detail="akm_pp"></my-list>
</div>

释：就像一个函数传参一样，把detail理解成一个形参，akm_pp相当于实参。

把注册组件的代码稍微修改一下：

Vue.component('my-list',{
  props:['detail'],
  template:`
    <div style="margin-top:10px;">
      <span><a>< img src="detail.img_url" /></a></span>
      <div>
        <h5><a>{{detail.title}}</a></h5>
        <p>特卖价：<b>{{detail.sale_price}}</b></p>
        <p><a>{{detail.org_price}}</a></p>
        <cite>{{detail.state}}</cite>
     </div>
   </div>`
});

释：除了template以外，增加了props，通过它来接受参数detail，传进来之后，可以在组件的模板template中使用它所接受的所有数据了。

传入数据

(3) 数据多了之后，使用 v-for 指令，它是专门用于处理列表渲染的指令；

new Vue({
  el:"#app",
  data:{
  amk_list:[
            {
                img_url:"../images/bird1.png",
                title:"精选牛肉精选牛肉精选牛肉",
                sale_price:"¥56800",
                org_price:"原价：¥76000",
                state:"立即购买",
                ended:false,
            },
            {
                img_url:"../images/bird2.png",
                title:"hiddensmile",
                sale_price:"¥123200",
                org_price:"原价：¥200000",
                state:"已结束",
                ended:true,
            },
            {
                img_url:"../images/bird3.png",
                title:"澳洲进口书画澳洲进口书画澳洲进口书画",
                sale_price:"¥666666",
                org_price:"原价：¥888888",
                state:"立即购买",
                ended:false,
            },
            {
                img_url:"../images/bird4.png",
                title:"倪萍的画倪萍的画倪萍的画",
                sale_price:"¥1314",
                org_price:"原价：¥520",
                state:"已结束",
                ended:true,
            },
        ]
    }
});

注：组件已经封装好，只需要给它传参即可，所以不需要改动组件的代码。而amk_list是一个数组，用 v-for 指令对它进行遍历即可。

<div id="app">
    <my-list v-for="amk_pp in amk_list" :detail="amk_pp"></my-list>
</div>

4件商品信息渲染出来