[js高手之路] vue系列教程 - 组件定义与使用上部(7)
组件是vue框架比较核心的内容，那么什么是组件呢？
通俗点讲：组件是由一堆html, css, javascript组成的代码片段， 作用是为了实现模块的重用
组件的基本用法:
1 <div id="box"> 2 <ccc></ccc> 3 </div> 4 <ccc></ccc> 5 <script> 6 //构造组件 7 var c = Vue.extend({ 8 template : '<h3>这是个标题</h3>' 9 }); 10 11 //注册组件, 注册了一个名称为ccc的组件，组件的内容是c 12 Vue.component('ccc',c); //全局注册 13 new Vue({ 14 el : '#box' 15 }); 16 </script>
组件的编译解释原理：
1，首先用Vue.extend创建一个组件，用template设置组件的内容
2，用Vue.component注册一个全局组件， 第一个参数为组件的名称， 第二个参数为组件的内容
3，在vue的实例，也可以这么说，在vue这个根组件下 用el指定这个组件 显示在哪个元素下
那么组件运行流程可以这么理解：
在上例中， 首先发现第2行有个自定义组件<ccc></ccc> 然后 去12行 查找<ccc>组件对应的内容 c, 而c的内容是 <h3>这是个标题</h3> 所以<ccc>就被替换成这个标题, 而 第4行的<ccc>组件 是不会被解释的，
因为组件只在id为box的元素下会被编译解释.
1 <div id="box1"> 2 <ccc></ccc> 3 </div> 4 <div id="box2"> 5 <ccc></ccc> 6 </div> 7 <ccc></ccc> 8 <script> 9 var c = Vue.extend({ 10 template: '<h3>我是一个标题</h3>' 11 }); 12 Vue.component("ccc", c); //注册全局组件 13 new Vue({ 14 el: '#box1' 15 }); 16 new Vue({ 17 el: '#box2' 18 }); 19 </script>
上例，我们把全局注册的ccc组件，分别显示在id为box1和box2的元素下，所以第7行的<ccc>组件就不会被编译解释.
全局组件与局部组件:
全局组件：用Vue.component注册的组件叫全局组件
局部组件： 把组件注册到另一个组件(C)的里面，叫局部组件，这个组件只能在C下面使用
1 <div id="box1"> 2 <ccc></ccc> 3 </div> 4 <div id="box2"> 5 <ccc></ccc> 6 </div> 7 <script> 8 var c = Vue.extend({ 9 template : '<h3>这是标题</h3>' 10 }); 11 new Vue({ 12 el : '#box2', 13 components : { //注册局部组件, 只能在#box2下面使用 14 "ccc" : c 15 } 16 }); 17 </script>
上例，id为box1下面的ccc组件不会被编译解释，因为ccc组件被注册为vue实例(根组件)下面的一个局部组件， 而这个局部组件又被显示在id为box2下面.
父组件与子组件:
1 <div id="box"> 2 <bbb></bbb> 3 </div> 4 <script> 5 var a = Vue.extend({ 6 template: '<h3>我是组件a</h3>' 7 }); 8 var b = Vue.extend({ 9 template: '<h3>我是组件b</h3><aaa></aaa>', 10 components: { //把a组件注册在b组件的下面 11 "aaa" : a 12 } 13 }); 14 Vue.component( "bbb", b ); 15 new Vue({ 16 el : "#box" 17 }); 18 </script>
上例，用Vue.extend构造了两个组件，一个<aaa> 一个 <bbb>, 而<aaa>组件又被注册在<bbb>组件里面，所以是<bbb>的子组件.
运行原理：
首先在第2行发现<bbb></bbb>组件， 然后在第14行寻找到<bbb>组件的对应内容为b 也就是
<h3>我是组件b</h3><aaa></aaa>
然后，又发现了<aaa>，然后在第11行找到<aaa>组件的对应内容为a 于是用a的模板内容 <h3>我是组件a</h3> 替换<aaa>组件，所以上面这段内容就变成
<h3>我是组件b</h3><h3>我是组件a</h3>
简化全局组件的注册方式:
可以把组件的构造与注册用Vue.component简写
1 <div id="box"> 2 <aaa></aaa> 3 </div> 4 <script> 5 Vue.component( 'aaa', { 6 template : '<h3>我是标题</h3>' //同时创建与注册, 会自动调用Vue.extend 7 }); 8 new Vue({ 9 el : "#box" 10 }); 11 </script>
简化局部组件的注册方式:
1 <div id="box"> 2 <aaa></aaa> 3 <bbb></bbb> 4 <bbb></bbb> 5 </div> 6 <aaa></aaa> 7 <bbb></bbb> 8 <script> 9 new Vue({ 10 el: '#box', 11 components: { 12 aaa: { 13 template: '<h3>我是a组件</h3>' 14 }, 15 bbb: { 16 template: '<h3>我是b组件</h3>' 17 } 18 } 19 }); 20 </script>
上例，第6行和第7行不会被编译解释，因为<aaa>组件和<bbb>组件被指定在id为box的元素下面编译显示
<script>标签分离模板内容
1 <div id="box"> 2 <aaa></aaa> 3 <bbb></bbb> 4 </div> 5 <script type="x-template" id="a"> 6 <h3>我是a组件</h3> 7 <p>我是段落a</p> 8 </script> 9 <script type="x-template" id="b"> 10 <h3>我是b组件</h3> 11 <p>我是段落b</p> 12 </script> 13 <script> 14 new Vue({ 15 el : '#box', 16 components : { 17 "aaa" : { 18 template : '#a' //找到id为a的模板， 把他的内容进行编译 19 }, 20 "bbb" : { 21 template : '#b' 22 } 23 } 24 }); 25 </script>
在<script>标签中指定type为x-template就不会认为 <script>标签之间的内容是javascript代码，而是被当做组件模板
运行原理：
在第2行发现<aaa>组件，然后在第17行发现<aaa>组件定义的模板template指定了一个id为a的<script>标签模板，所以用id为a的<script>模板里面的内容去替换组件<aaa>
第3行的组件<bbb>同上
用template分离模板内容
1 <div id="box"> 2 <aaa></aaa> 3 <bbb></bbb> 4 </div> 5 <template id="a"> 6 <h3>我是a组件</h3> 7 <p>我是段落a</p> 8 </template> 9 <template id="b"> 10 <h3>我是b组件</h3> 11 <p>我是段落b</p> 12 </template> 13 <script> 14 new Vue({ 15 el : '#box', 16 components : { 17 "aaa" : { 18 template : '#a' //找到id为a的模板， 把他的内容进行编译 19 }, 20 "bbb" : { 21 template : '#b' 22 } 23 } 24 }); 25 </script>
运行原理同上，只不过把模板标签从<script>换成<template>
