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组件使用中遇到的问题整理及解决
Feb 21 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
js实现简单五子棋游戏
May 28 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python常见工厂函数用法示例
2018/03/21 Python
详解Python:面向对象编程
2019/04/10 Python
python Tkinter的图片刷新实例
2019/06/14 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
农贸市场管理制度
2014/01/31 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
2015年采购部工作总结
2015/04/23 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
python接口测试返回数据为字典取值方式
2022/02/12 Python