[js高手之路] vue系列教程

组件是vue框架比较核心的内容，那么什么是组件呢？

通俗点讲：组件是由一堆html, css, javascript组成的代码片段， 作用是为了实现模块的重用

组件的基本用法:

1 <div >
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 >
2     <ccc></ccc>
3 </div>
4 <div >
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 >
2         <ccc></ccc>
3     </div>
4     <div >
5         <ccc></ccc>
6     </div>
7     <script>
8
4000
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 >
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 >
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 >
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 >
2         <aaa></aaa>
3         <bbb></bbb>
4     </div>
5     <script type="x-template" >
6        <h3>我是a组件</h3>
7         <p>我是段落a</p>
8     </script>
9     <script type="x-template" >
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 >
2     <aaa></aaa>
3     <bbb></bbb>
4 </div>
5 <template >
6     <h3>我是a组件</h3>
7     <p>我是段落a</p>
8 </template>
9 <template >
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>