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 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
jquery延迟对象解析
Oct 26 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
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函数
2006/10/09 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
详解YII关联查询
2016/01/10 PHP
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
Bootstrap精简教程
2015/11/27 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
Python中除法使用的注意事项
2014/08/21 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
django的登录注册系统的示例代码
2018/05/14 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Django 框架模型操作入门教程
2019/11/05 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
UNIX命令速查表
2012/03/10 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
家长写给老师的建议书
2014/03/13 职场文书
新文化运动的基本口号
2014/06/21 职场文书
世界气象日活动总结
2015/02/27 职场文书
环保守法证明
2015/06/24 职场文书
Python实现机器学习算法的分类
2021/06/03 Python