首页 > 代码库 > Vuejs——(13)组件——杂项

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=http://www.mamicode.com/"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也没搜到相关的内容,┑( ̄Д  ̄)┍

 

 

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

Vuejs——(13)组件——杂项