Vuejs第十三篇之组件——杂项


Posted in Javascript onSeptember 09, 2016

什么是组件?

组件(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绑定的数据绑定起来,绑定方法同普通的形式,在模板中绑定。

示例代码:

<div id="app"> 
<button @click="toknowchildren">点击让子组件显示</button> 
<table> 
<tr> 
<td>索引</td> 
<td>ID</td> 
<td>说明</td> 
</tr> 
<tr is="the-tr" v-for="i in items" v-bind:id="i" :index="$index"></tr> 
</table> 
</div> 
<script> 
var vm = new Vue({ 
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:分发,允许将父组件的内容插入到子组件的视图结构中。

如代码:

<div id="app"> 
<p>这是第一个父组件</p> 
<widget 
:the-value="test" 
@some="todo"> 
<span>【第一个父组件插入的内容】</span> 
</widget> 
</div> 
<div id="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("widget click"); 
} 
}, 
props: ['theValue'] 
}) 
var vm = new Vue({ 
el: '#app', 
data: { 
test: "test" 
}, 
methods: { 
todo: function () { 
console.log("这是第一个父组件") 
} 
} 
}); 
var vm_other = new Vue({ 
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属性。

大概样子是这样的,

<div id="app"> 
<my-template></my-template> 
</div> 
<script> 
Vue.component("myTemplate", { 
template: "<p><my-template></my-template></p>" 
})

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

示例代码如下:

<ul id="app"> 
<li> 
{{b}} 
</li> 
<my-template v-if="a" :a="a.a" :b="a.b"></my-template> 
</ul> 
<script> 
Vue.component("myTemplate", { 
template: '<ul><li>{{b}}</li><my-template v-if="a" :a="a.a" :b="a.b"></my-template></ul>', 
props: ["a", "b"] 
}) 
var data = { 
a: { 
a: { 
a: 0, 
b: 3 
}, 
b: 2 
}, 
b: 1 
} 
var vm = new Vue({ 
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第十三篇之组件——杂项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
js实现产品缩略图效果
Mar 10 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery属性选择器用法示例
Sep 09 #Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 #Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 #Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 #Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 #Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 #Javascript
jQuery子元素过滤选择器用法示例
Sep 09 #Javascript
You might like
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
php创建图像具体步骤
2017/03/13 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
php实现头像上传预览功能
2017/04/27 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
angular4自定义组件详解
2017/09/28 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python中itertools的用法详解
2020/02/07 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
大学新生军训方案
2014/05/03 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
师德师风培训感言
2015/08/03 职场文书
大学副班长竞选稿
2015/11/21 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书