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实现显示和隐藏的4种简单方式
Aug 28 Javascript
理解Javascript闭包
Nov 01 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 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
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
innerText 使用示例
2014/01/23 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
js获取页面description的方法
2015/05/21 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
ipad上运行python的方法步骤
2019/10/12 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
营销总经理的岗位职责
2013/12/15 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
绩效管理实施方案
2014/03/19 职场文书
新课培训心得体会
2014/09/03 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
Redis主从复制操作和配置详情
2022/09/23 Redis