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 相关文章推荐
JavaScript中的类继承
Nov 25 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
JS二维数组的定义说明
Mar 03 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
jsonp跨域请求详解
Jul 13 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 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模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
你必须知道的Javascript知识点之"this指针"的应用
2013/04/23 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
Python 里最强的地图绘制神器
2021/03/01 Python
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
绩效考核实施方案
2014/03/18 职场文书
个人评语大全
2014/05/04 职场文书
临床医学专业求职信
2014/08/08 职场文书
2015年电工工作总结
2015/04/10 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书