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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
JavaScript验证知识整理
Mar 24 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
javascript实现前端分页功能
Nov 26 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
关于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
php将日期格式转换成xx天前的格式
2015/04/16 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
javascript读写json示例
2014/04/11 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
vue params、query传参使用详解
2017/09/12 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
python 异步async库的使用说明
2020/05/04 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
课程改革实施方案
2014/03/16 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
教你用Python matplotlib库制作简单的动画
2021/06/11 Python