之前的文章我们对 vue 的列表输出做了介绍，本章我们来看一下 vue 的组件 component。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <p>{{title}}</p> 11 <table> 12 <tbody> 13 <row></row> 14 <row></row> 15 </tbody> 16 </table> 17 </div> 18 <script> 19 Vue.component("row", { 20 data() { 21 return { 22 number: 0 23 } 24 }, 25 template: ` 26 <tr><td>{{this.number}}</td></tr> 27 ` 28 }); 29 var app = new Vue({ 30 el: '#app', 31 data: { 32 title: "hello world" 33 } 34 }) 35 </script> 36 </body> 37 </html>
在上面的代码中，我们简单定义了一个 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> 标签，我们可以通过下面的方式解决：
<row></row> <tr is="row"></tr>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <p>{{title}}</p> 11 <table> 12 <tbody> 13 <!-- <row></row>--> 14 <!-- <row></row>--> 15 <tr is="row"></tr> 16 <tr is="row"></tr> 17 </tbody> 18 </table> 19 </div> 20 <script> 21 Vue.component("row", { 22 data() { 23 return { 24 number: 0 25 } 26 }, 27 template: ` 28 <tr><td>{{this.number}}</td></tr> 29 ` 30 }); 31 var app = new Vue({ 32 el: '#app', 33 data: { 34 title: "hello world" 35 } 36 }) 37 </script> 38 </body> 39 </html>
<tbody> 能识别 <tr> 标签，所以我们将 row 标签改为 <tr is="row"></tr>，这样的意思是以 <tr> 标签显示，但是里面的内容时 component 为 row 的内容，这样就能正确显示，结果如下：
当我们在像 ul ol select 这些标签内写 component 组件时我们可以通过 is 的方法来将内容放到对应的标签内。
以上就是本篇的内容，在接下来的文章里我们将对 component 组件进行详细的介绍。