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 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
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.ini中文版(2)
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
python排序方法实例分析
2015/04/30 Python
Python编程求质数实例代码
2018/01/31 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
Shell如何接收变量输入
2016/08/06 面试题
Prototype是怎么扩展DOM的
2014/10/01 面试题
大学生新闻专业个人自我评价
2013/11/12 职场文书
《雾凇》教学反思
2014/02/17 职场文书
农村改厕实施方案
2014/03/22 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
浅谈Redis的事件驱动模型
2022/05/30 Redis