Vuejs第十三篇之组件——杂项
什么是组件？
组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。
本篇资料是小编参考官方文档的基础上整理的一篇更加细致的说明，代码更多更全，非常适合新手学习。
官方文档：
http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6
组件——杂项详细介绍如下所示：
①组件和v-for
简单来说，就是组件被多次复用；
例如表格里的某一行，又例如电商的商品橱窗展示（单个橱窗），都可以成为可以被复用的组件；
只要编写其中一个作为组件，然后使数据来源成为一个数组（或对象，但个人觉得最好是数组），通过v-for的遍历，组件的每个实例，都可以获取这个数组中的一项，从而生成全部的组件。
而数据传输，由于复用，所以需要使用props，将遍历结果i，和props绑定的数据绑定起来，绑定方法同普通的形式，在模板中绑定。
示例代码：
<divid="app">
<button@click="toknowchildren">点击让子组件显示</button>
<table>
<tr>
<td>索引</td>
<td>ID</td>
<td>说明</td>
</tr>
<tris="the-tr"v-for="iinitems"v-bind:id="i":index="$index"></tr>
</table>
</div>
<script>
varvm=newVue({
el:'#app',
data:{
items:[1,2,3,4]
},
methods:{
toknowchildren:function(){//切换组件显示
console.log(this.$children);
}
},
components:{
theTr:{//第一个子组件
template:"<tr>"+
"<td>{{index}}</td>"+
"<td>{{id}}</td>"+
"<td>这里是子组件</td>"+
"</tr>",
props:['id','index']
}
}
});
</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：分发，允许将父组件的内容插入到子组件的视图结构中。
如代码：
<divid="app">
<p>这是第一个父组件</p>
<widget
:the-value="test"
@some="todo">
<span>【第一个父组件插入的内容】</span>
</widget>
</div>
<divid="app2">
<p>这是第二个父组件</p>
<widget@some="todo">
</widget>
</div>
<script>
Vue.component("widget",{
template:"<button@click='dosomething'><slot></slot>这是一个复用的组件，点击他{{theValue}}</button>",
methods:{
dosomething:function(){
this.$emit("some");
}
},
events:{
some:function(){
console.log("widgetclick");
}
},
props:['theValue']
})
varvm=newVue({
el:'#app',
data:{
test:"test"
},
methods:{
todo:function(){
console.log("这是第一个父组件")
}
}
});
varvm_other=newVue({
el:'#app2',
data:{
name:"first"
},
methods:{
todo:function(){
console.log("这是另外一个父组件")
}
}
});
</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属性。
大概样子是这样的，
<divid="app">
<my-template></my-template>
</div>
<script>
Vue.component("myTemplate",{
template:"<p><my-template></my-template></p>"
})
这种是无限递归，肯定是不行的。因此，需要控制他递归的层数，例如通过数据来控制递归，当数据为空时，则停止递归。
示例代码如下：
<ulid="app">
<li>
{{b}}
</li>
<my-templatev-if="a":a="a.a":b="a.b"></my-template>
</ul>
<script>
Vue.component("myTemplate",{
template:'<ul><li>{{b}}</li><my-templatev-if="a":a="a.a":b="a.b"></my-template></ul>',
props:["a","b"]
})
vardata={
a:{
a:{
a:0,
b:3
},
b:2
},
b:1
}
varvm=newVue({
el:'#app',
data:data,
methods:{
todo:function(){
this.test+="!";
console.log(this.test);
}
}
});
</script>
说明：
【1】向下传递时，通过props传递a的值和b的值，其中a的值作为递归后组件的a和b的值的数据来源；
然后判断传递到递归后的组件的a的值是否存在，如果存在则继续递归；
如果a的值不存在，则停止递归。
⑥片断实例：
简单来说，所谓片断实例，就是组件的模板不是处于一个根节点之下：
片断实例代码：
Vue.component("myTemplate",{
template:'<div>1</div>'+
'<div>2</div>',
})
非片断实例：
Vue.component("myTemplate",{
template:'<div>'+
'<div>1</div>'+
'<div>2</div>'+
'</div>',
})
片断实例的以下特性被忽略：
【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
以上所述是小编给大家介绍的Vuejs第十三篇之组件——杂项，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！