09、掌握Vue的另一个核心：组件

实现组件

---

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

 <div class="unit">
    <div class="content">
        <h1>这里是文章的标题</h1>
        <div class="info">
            <span>2017年4月10日</span>
            <span class="original">原创</span>
        </div>
    </div>
    <img src="../img/cover.jpg" alt="">
 </div>

效果图如下：

效果图.png

在 vue 组件中，这些代码将作为我们组件的模板 template。
接下来我们看看 vue 是如何实现一个组件的。
首先，我们还是先创建一个 vue 实例。

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

成功创建了一个 vue 实例 vm，挂载元素是 id 为 app 的 div 节点。
接下来，我们在创建实例 vm 之前，利用 vue 提供的 API 来注册一个组件。稍微修改一下上面的代码：

 <div id="app"></div>
 <script>
    Vue.component('my-article',{
       template:`<div>
                <div>
                <h1>这里是文章的标题</h1>
                <div>
                <span>2017年4月10日</span>
                <span>原创</span>
                </div>
                </div>
                <img src="../img/cover.jpg" alt="">
                </div>`
    });

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

我们使用了 vue 提供的全局 API Vue.component()，注册了一个名为：“my-article”的组件，而组件的 template 正好是我们上面的 html 代码，这样，我们就可以用 <my-article></my-article> 的方式来使用我们的组件。

注意：一定要确保实例 vm 在创建之前，<my-article> 组件已经被成功注册，这也是为什么我们要把代码写在实例化之前。

既然注册了组件 <my-article>，我们就来使用这个自定义的组件：

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

效果如下：

效果图.png

我们看到最终渲染的不是标签 <my-article></my-article>，而是我们组件的模板 template 的值。我们成功注册了一个自定义的组件并使用了它。
但这并不够，我们有的文章目录中不仅仅只有一篇文章，而且每篇文章的标题和日期都不一样，我们如何动态地展示它们的数据呢？
这里就涉及到了组件的传参 props，不但函数可以接受参数，vue 的组件也可以。接下来，我们看看怎么实现传参。
我们知道，组件中的这4部分是需要动态获取数据的：标题，时间，是否原创，头像。

效果图.png
那么，我们就通过传参的方式把这些数据传到组件，实现数据动态展示。
首先，我们把数据存储在实例vm的data中：

 let vm = new Vue({
   el:"#app",
   data:{
       article:{
           title:"文章标题-1",
           date:" 2017年03月06日",
           is_original:true,
           cover_url:"../img/cover.jpg"
       }
   }
 });

我们给 data 增加了一个文章 article 的信息，包括：标题 title，时间 date，是否原创 is_original，头像 cover_url。
文章的信息有了，我们怎么传到组件中去呢？

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

就像一个函数传参一样，你可以把 detail 理解成一个形参，article 相当于实参。

Vue.component('my-article',{
   props:['detail'],
   template:`<div>
            <div>
            <h1>{{detail.title}}</h1>
            <div>
            <span>{{detail.date}}</span>
            <span v-show="detail.is_original">原创</span>
            </div>
            </div>
            <img :src="detail.cover_url" alt="">
            </div>`
});

除了 template 以外，我们增加了 props，通过它来接受我们的参数 detail，传进来之后，你可以在组件的模板 template 中使用它所接受的所有数据了。比如，我们传进来的数据包含着文章的信息：title，date，is_original，cover_url。
效果如下：

效果图.png

数据是动态读取了，那么我们的目录并不仅仅只有一篇文章，当我们数据多了之后，该用什么方式展示出来呢？

let vm = new Vue({
   el:"#app",
   data:{
       articles:[
           {
               title:"文章标题-1",
               date:"2017年03月06日",
               is_original:true,
               cover_url:"../img/cover.jpg"
           },
           {
               title:"文章标题-2",
               date:" 2017年03月09日",
               is_original:true,
               cover_url:"../img/cover.jpg"
           },
           {
               title:"文章标题-3",
               date:"2017年03月17日",
               is_original:true,
               cover_url:"../img/cover.jpg"
           },
           {
               title:"文章标题-4",
               date:"2017年03月20日",
               is_original:true,
               cover_url:"../img/cover.jpg"
           },
       ]
   }
 });

articles是一个数组，我们用 v-for 指令对它进行遍历即可。
我们对html代码稍微改动一下：

 <div id="app">
    <my-article 
            v-for="item in articles" 
            :detail="item">
    </my-article>
 </div>

我们在组件上加上了 v-for 指令，并遍历了 articles。
渲染结果：

效果图.png