Vue.js实战之组件的进阶


Posted in Javascript onApril 04, 2017

一、基本用法

在使用 vue-cli 创建的项目中,组件的创建非常方便,只需要新建一个 .vue 文件,然后在 <template> 中写好 HTML 代码,一个简单的组件就完成了

Vue.js实战之组件的进阶 

一个完整的组件,除了 <template> 以外,还有 <script> 和 <style>

需要注意的是,<script> 中的 data 必须是函数

Vue.js实战之组件的进阶 

然后在其他文件的 js 里面引入并注册,就能直接使用这个组件了

Vue.js实战之组件的进阶

Vue.js实战之组件的进阶

二、使用 slot 分发内容

开发过程中,常常需要在子组件内添加新的内容,这时候可以在子组件内部留一个或者多个插口 <slot>

Vue.js实战之组件的进阶

然后在调用这个子组件的时候加入内容

Vue.js实战之组件的进阶

添加的内容就会分发到对应的 <slot> 中

<slot> 中还可以作为一个作用域,在子组件中定义变量,然后在父组件中自定义渲染的方式

Vue.js实战之组件的进阶 

Vue.js实战之组件的进阶

这个示例中,首先在子组件中添加 <slot>,并在子组件中定义了数组变量 navs

然后在父组件中以作用域 <template> 添加内容,其中 scope 是固有元素,它的值对应一个临时变量 props

而 props 将接收子组件中,所有绑定的属性(如 text)

三、动态组件

Vue 还可以将多个子组件,都挂载在同一个位置,通过变量来切换组件,实现 tab 菜单这样的效果

Vue.js实战之组件的进阶

这样的功能可以通过路由 vue-router 实现,但路由更适合较大的组件,而且 url 会有相应的改变

Vue 自身保留的 <component> 元素,可以将组件动态绑定到 is 特性上,从而很方便的实现动态组件切换

Vue.js实战之组件的进阶

上例中,当 tabView 的值改变,<component> 就会渲染对应的组件,和路由的效果十分类似,但是地址栏并没有发生改变

但这样一来,每次切换组件都会重新渲染,无法保留组件上的数据。这时可以使用 keep-alive 将组件保留在内存中,避免重新渲染

Vue.js实战之组件的进阶

Vue.js实战之组件的进阶 

四、递归组件

当组件拥有 name 属性的时候,就可以在它的模板内递归的调用自己,这在开发树形组件的时候十分有效

Vue.js实战之组件的进阶

上面是一个子组件,定义了 name 为 simple03,然后在模板中调用自身,结合 v-for 实现递归

为了防止出现死循环,在调用自身的时候,加入了 v-if 作为判定条件

父组件中调用的时候,需要通过 props 传入一个 tree:

Vue.js实战之组件的进阶

Vue.js实战之组件的进阶 

最终渲染结果:

Vue.js实战之组件的进阶

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
详解Node.JS模块 process
Aug 31 Javascript
微信小程序实现拍照和相册选取图片
May 09 Javascript
JavaScript异步操作中串行和并行
Nov 20 Javascript
关于axios返回空对象的问题解决
Apr 04 #Javascript
jQuery自定义图片上传插件实例代码
Apr 04 #jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 #jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 #jQuery
JavaScript实现实时更新系统时间的实例代码
Apr 04 #Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 #jQuery
webpack独立打包和缓存处理详解
Apr 03 #Javascript
You might like
Terran历史背景
2020/03/14 星际争霸
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
Python中logging实例讲解
2019/01/17 Python
ubuntu上安装python的实例方法
2019/09/30 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
文秘自荐信
2013/10/20 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
少年闰土教学反思
2014/02/22 职场文书
干部选拔任用方案
2014/05/26 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
信仰心得体会
2014/09/05 职场文书
体育教师个人工作总结
2015/02/09 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js