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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
jQuery学习5 jQuery事件模型
Feb 07 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
javascript执行环境及作用域详解
May 05 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 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
第十四节 命名空间 [14]
2006/10/09 PHP
php中opendir函数用法实例
2014/11/15 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
Python实现堆排序的方法详解
2016/05/03 Python
深入浅析Python中的迭代器
2019/06/04 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
Python如何输出警告信息
2020/07/30 Python
Python爬取某平台短视频的方法
2021/02/08 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
九年级英语教学反思
2014/01/31 职场文书
大学军训感想
2014/02/12 职场文书
晨会主持词
2014/03/17 职场文书
企业文化标语口号
2014/06/09 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
SpringBoot生成License的实现示例
2021/06/16 Java/Android
python中pycryto实现数据加密
2022/04/29 Python