之前的文章我们对 vue 的列表输出做了介绍，本章我们来看一下 vue 的组件 component。

1  2  3  4     
      5      6      7  8  9 
     
      10     
      
{
   {title}}
11     
      
      
      
       12         
        13             14             15         
16     
17 
     
18 36 37 

在上面的代码中，我们简单定义了一个 component 组件 row，我们可以理解为该组件为整个 Vue 实例 app 的一个子组件，在 row 组件中，我们可以看到 data 内的数据不能再像根组件 app 那样直接定义直接定义为对象，而是作为一个方法进行书写，里面的数据需要 return 出来，这样做是为了避免父组件与子组件，子组件与子组件之间的 data 数据都写成 data：{ } 这样的类型数据时造成冲突。

我们将 HTML 代码写在一个 template 模板当中，其中的 ` ` 为 ES6 里的模板字符转，在这儿不做详细解释了。里面的数据还是按照 {

{ }} 插值表达式书写。

这样我们就可以在 Vue 的实例 id="app" 所控制范围内直接将 component 的名称 row 按照标签的方式书写。结果如下：

内容可以在页面上显示，但是令人遗憾的是当我们在控制台检查标签的时候发现我们定义的 <tr><td></td></tr> 并没有插入 body 内，这是由于在 HTML 内，<tbody> 标签不识别 <row> 标签，我们可以通过下面的方式解决：

1  2  3  4     
      5      6      7  8  9 
     
      10     
      
{
   {title}}
11     
      
       12         
        13 
14 
15             
   16             
17         
18     
19 
     
20 38 39 

<tbody> 能识别 <tr> 标签，所以我们将 row 标签改为 <tr is="row"></tr>，这样的意思是以 <tr> 标签显示，但是里面的内容时 component 为 row 的内容，这样就能正确显示，结果如下：

当我们在像 ul ol select 这些标签内写 component 组件时我们可以通过 is 的方法来将内容放到对应的标签内。

以上就是本篇的内容，在接下来的文章里我们将对 component 组件进行详细的介绍。