Vue函数式组件-你值得拥有


Posted in Javascript onMay 09, 2019

函数式组件特点:

  • 没有管理任何状态
  • 没有监听任何传递给它的状态
  • 没有生命周期方法
  • 它只是接收一些prop的函

我们将这样的组件标记为functional:

  • 无状态 == 无响应式数据
  • 无实例 == 无this上下文

函数式组件的优点:

渲染开销低,因为函数式组件只是函数;

函数式组件基本写法:

{
 functional: true,
 // Props 是可选的
 props: {
 // ...
 },
 // 为了弥补缺少的实例
 // 提供第二个参数作为上下文
 render: function (createElement, context) {
 // ...
 }
}

下面在通过代码给大家详细介绍vue函数式组件,具体代码如下所示;

{
 functional: true,
 // Props 是可选的
 props: {
 // ...
 },
 // 为了弥补缺少的实例
 // 提供第二个参数作为上下文
 render: function (createElement, context) {
 // ...
 }
}

组件需要的一切都是通过 context 参数传递,它是一个包含如下字段的对象:

  • props: 提供所有prop的对象
  • children:VNode 子节点的数组
  • slots: 一个函数,返回了包含所有插槽的对象
  • scoptedSlots:(2.6.0) 一个暴露传入的作用域插槽的对象,也以函数形式暴露普通插槽
  • data:传递个组件的整个 数据对象 ,作为createElement的第二个参数传入组件
  • parent:对父组件的引用
  • listeners:(2.3.0+) 一个包含了:所有父组件为当前组件祖册的事件监听器对象,是data.on的一个别名
  • injections:(2.3.0+) 如果使用了inject选项,则改对象包含了:应当被注入的属性;

总结

以上所述是小编给大家介绍的Vue函数式组件你值得拥有,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
javascript 贪吃蛇实现代码
Nov 22 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
微信小程序实现时间戳格式转换
Jul 20 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 Javascript
12个提高JavaScript技能的概念(小结)
May 09 #Javascript
Vue 处理表单input单行文本框的实例代码
May 09 #Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 #Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 #Javascript
详解微信小程序的不同函数调用的几种方法
May 08 #Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 #Javascript
vue中使用props传值的方法
May 08 #Javascript
You might like
php中socket的用法详解
2014/10/24 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
Script的加载方法小结
2011/01/12 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
简单的js表单验证函数
2013/10/28 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
Python实现把数字转换成中文
2015/06/29 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
使用Python来开发微信功能
2018/06/13 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Python转换时间的图文方法
2019/07/01 Python
python如何爬取网页中的文字
2020/07/28 Python
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
自荐信格式的六要素
2013/09/21 职场文书
迟到检讨书1000字
2014/01/15 职场文书
销售简历自我评价
2014/01/24 职场文书
中学生检讨书范文
2014/11/03 职场文书
公务员年终个人总结
2015/02/12 职场文书
单位计划生育责任书
2015/05/09 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js