Vuejs——（13）组件——杂项

本篇资料来于官方文档：

http://cn.vuejs.org/guide/components.html#u6742_u9879

本文是在官方文档的基础上，更加细致的说明，代码更多更全。

简单来说，更适合新手阅读

（三十）组件——杂项

①组件和v-for

简单来说，就是组件被多次复用；

例如表格里的某一行，又例如电商的商品橱窗展示（单个橱窗），都可以成为可以被复用的组件；

只要编写其中一个作为组件，然后使数据来源成为一个数组（或对象，但个人觉得最好是数组），通过v-for的遍历，组件的每个实例，都可以获取这个数组中的一项，从而生成全部的组件。

而数据传输，由于复用，所以需要使用props，将遍历结果i，和props绑定的数据绑定起来，绑定方法同普通的形式，在模板中绑定。

示例代码：

[html] view plain copy

 

 

1. <div id="app">  
2.     <button @click="toknowchildren">点击让子组件显示</button>  
3.     <table>  
4.         <tr>  
5.             <td>索引</td>  
6.             <td>ID</td>  
7.             <td>说明</td>  
8.         </tr>  
9.         <tr is="the-tr" v-for="i in items" v-bind:id="i" :index="$index"></tr>  
10.     </table>  
11. </div>  
12. <script>  
13.     var vm = new Vue({  
14.         el: ‘#app‘,  
15.         data: {  
16.             items: [1, 2, 3, 4]  
17.         },  
18.         methods: {  
19.             toknowchildren: function () {   //切换组件显示  
20.                 console.log(this.$children);  
21.             }  
22.         },  
23.         components: {  
24.             theTr: { //第一个子组件  
25.                 template: "<tr>" +  
26.                 "<td>{{index}}</td>" +  
27.                 "<td>{{id}}</td>" +  
28.                 "<td>这里是子组件</td>" +  
29.                 "</tr>",  
30.                 props: [‘id‘,‘index‘]  
31.             }  
32.         }  
33.     });  
34. </script>  

说明：

【1】记得将要传递的数据放在props里！

【2】将index和索引$index绑定起来，因为索引从0开始，因此索引所在列是从0开始；id是和遍历items的i绑定在一起的，因此id从1开始。

【3】可以在父组件中，通过this.$children来获取子组件（但是比较麻烦，特别是组件多的时候，比较难定位）；

②编写可复用的组件：

简单来说，一次性组件（只用在这里，不会被复用的）跟其他组件紧密耦合是可以的，但是，可复用的组件应当定义一个清晰的公开接口。（不然别人怎么用？）

可复用的组件，基本都是要和外部交互的，而一个组件和外部公开的交互接口有：

【1】props：允许外部环境数据传递给组件；

【2】事件：允许组件触发外部环境的action，就是说通过在挂载点添加v-on指令，让子组件的events触发时，同时触发父组件的methods；

【3】slot：分发，允许将父组件的内容插入到子组件的视图结构中。

如代码：

[html] view plain copy

 

 

1. <div id="app">  
2.     <p>这是第一个父组件</p>  
3.     <widget  
4.             :the-value="test"  
5.             @some="todo">  
6.         <span>【第一个父组件插入的内容】</span>  
7.     </widget>  
8. </div>  
9. <div id="app2">  
10.     <p>这是第二个父组件</p>  
11.     <widget @some="todo">  
12.     </widget>  
13. </div>  
14. <script>  
15.     Vue.component("widget", {  
16.         template: "<button @click=‘dosomething‘><slot></slot>这是一个复用的组件，点击他{{theValue}}</button>",  
17.         methods: {  
18.             dosomething: function () {  
19.                 this.$emit("some");  
20.             }  
21.         },  
22.         events: {  
23.             some: function () {  
24.                 console.log("widget click");  
25.             }  
26.         },  
27.         props: [‘theValue‘]  
28.     })  
29.   
30.     var vm = new Vue({  
31.         el: ‘#app‘,  
32.         data: {  
33.             test: "test"  
34.         },  
35.         methods: {  
36.             todo: function () {  
37.                 console.log("这是第一个父组件")  
38.             }  
39.         }  
40.     });  
41.     var vm_other = new Vue({  
42.         el: ‘#app2‘,  
43.         data: {  
44.             name: "first"  
45.         },  
46.         methods: {  
47.             todo: function () {  
48.                 console.log("这是另外一个父组件")  
49.             }  
50.         }  
51.     });  
52. </script>  

说明：

【1】在第一个父组件中使用了分发slot，使用了props来传递值（将test的值传到子组件的theValue之中）；

【2】在两个组件中，子组件在点击后，调用methods里的dosomething方法，然后执行了events里的some事件。又通过挂载点的@some=”todo”，将子组件的some事件和父组件的todo方法绑定在一起。

因此，点击子组件后，最终会执行父组件的todo方法。

【3】更改父组件中，被传递到子组件的值，会同步更改子组件的值（即二者会数据绑定）；

③异步组件：

按照我的理解，简单来说，一个大型应用，他有多个组件，但有些组件无需立即加载，因此被分拆成多个组件（比如说需要立即加载的，不需要立即加载的）；

需要立即加载的，显然放在同一个文件中比较好（或者同一批一起请求）；

而不需要立即加载的，可以放在其他文件中，但需要的时候，再ajax向服务器请求；

这些后续请求的呢，就是异步组件；

做到这种异步功能的，就是Vue.js的功能——允许将组件定义为一个工厂函数，动态解析组件的定义。

可以配合webpack使用。

至于如何具体使用，我还不太明白，教程中写的不清，先搁置等需要的时候来研究。

链接：

http://cn.vuejs.org/guide/components.html#u5F02_u6B65_u7EC4_u4EF6

④资源命名的约定：

简单来说，html标签（比如div和DIV是一样的）和特性（比如要写成v-on这样的指令而不是vOn）是不区分大小写的。

而资源名往往是写成驼峰式（比如camelCase驼峰式），或者单词首字母都大写的形式（比如PascalCase，我不知道该怎么称呼这个，不过这样写很少的说）。

Vue.component("myTemplate", {
    //......略
})

Vue.js可以自动识别这个并转换，

<my-template></my-template>

以上那个模板可以自动替换这个标签。

⑤递归组件：

简单来说，递归组件就是组件在自己里内嵌自己的模板。

组件想要递归，需要name属性，而Vue.component自带name属性。

大概样子是这样的，

[html] view plain copy

 

 

1. <div id="app">  
2.     <my-template></my-template>  
3. </div>  
4. <script>  
5.     Vue.component("myTemplate", {  
6.         template: "<p><my-template></my-template></p>"  
7.     })  

这种是无限递归，肯定是不行的。因此，需要控制他递归的层数，例如通过数据来控制递归，当数据为空时，则停止递归。

示例代码如下：

[html] view plain copy

 

 

1. <ul id="app">  
2.     <li>  
3.         {{b}}  
4.     </li>  
5.     <my-template v-if="a" :a="a.a" :b="a.b"></my-template>  
6. </ul>  
7. <script>  
8.     Vue.component("myTemplate", {  
9.         template: ‘<ul><li>{{b}}</li><my-template v-if="a" :a="a.a" :b="a.b"></my-template></ul>‘,  
10.         props: ["a", "b"]  
11.     })  
12.     var data = {  
13.         a: {  
14.             a: {  
15.                 a: 0,  
16.                 b: 3  
17.             },  
18.             b: 2  
19.         },  
20.         b: 1  
21.     }  
22.     var vm = new Vue({  
23.         el: ‘#app‘,  
24.         data: data,  
25.         methods: {  
26.             todo: function () {  
27.                 this.test += "!";  
28.                 console.log(this.test);  
29.             }  
30.         }  
31.     });  
32. </script>  

说明：

【1】向下传递时，通过props传递a的值和b的值，其中a的值作为递归后组件的a和b的值的数据来源；

然后判断传递到递归后的组件的a的值是否存在，如果存在则继续递归；

如果a的值不存在，则停止递归。

⑥片断实例：

简单来说，所谓片断实例，就是组件的模板不是处于一个根节点之下：

片断实例代码：

[html] view plain copy

 

 

1. Vue.component("myTemplate", {  
2.     template: ‘<div>1</div>‘ +  
3.     ‘<div>2</div>‘,  
4. })  

非片断实例：

[html] view plain copy

 

 

1. Vue.component("myTemplate", {  
2.     template: ‘<div>‘ +  
3.     ‘<div>1</div>‘ +  
4.     ‘<div>2</div>‘ +  
5.     ‘</div>‘,  
6. })  

片断实例的以下特性被忽略：

【1】组件元素上的非流程控制指令（例如写在挂载点上的，由父组件控制的v-show指令之类，但注意，v-if属于流程控制指令）；

【2】非props特性（注意，props不会被忽略，另外props是写在挂载点上的）；

【3】过渡（就是transition这个属性，将被忽略）；

更多的参照官方文档：

http://cn.vuejs.org/guide/components.html#u7247_u65AD_u5B9E_u4F8B

⑦内联模板

参照：http://cn.vuejs.org/guide/components.html#u5185_u8054_u6A21_u677F

反正我试了下失败了，google也没搜到相关的内容，┑(￣Д ￣)┍

————————组件的基本知识到这里结束————————————