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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
微信小程序自定义弹出层效果
May 26 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 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 柱状图实现代码
2009/12/04 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python脚本设置超时机制系统时间的方法
2016/02/21 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
鸿星尔克广告词
2014/03/21 职场文书
大连星海广场导游词
2015/02/10 职场文书
行政助理岗位职责
2015/02/10 职场文书
兴趣班停课通知
2015/04/24 职场文书
医院员工辞职信范文
2015/05/12 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
php实例化对象的实例方法
2021/11/17 PHP