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 相关文章推荐
浅谈Javascript 执行顺序
Dec 18 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
Vue表单控件数据绑定方法详解
Feb 05 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
JQuery从头学起第三讲
2010/07/06 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
python3实现微型的web服务器
2019/09/03 Python
使用python制作一个解压缩软件
2019/11/13 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
全球虚拟主机商:HostGator
2017/02/06 全球购物
特步官方商城:Xtep
2017/03/21 全球购物
实习评语
2013/12/16 职场文书
大学生工作自荐书
2014/06/16 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
安全员岗位职责范本
2015/04/11 职场文书
网络销售员岗位职责
2015/04/11 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书