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获取网页中的js、css、Flash等文件
Dec 20 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
vuex实现购物车功能
Jun 28 Javascript
5个实用的JavaScript新特性
Jun 16 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
apache配置虚拟主机的方法详解
2013/06/17 PHP
php读取mysql的简单实例
2014/01/15 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
暑期研修感言
2014/02/17 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
大学军训感言1500字
2014/03/09 职场文书
2014年团工作总结
2014/11/27 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python