vue中render函数的使用详解


Posted in Javascript onOctober 12, 2018

render函数

vue通过 template 来创建你的 HTML。但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力。此时,需要用render来创建HTML。

render方法的实质就是生成template模板;

通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的;

通过这三个参数,可以生成一个完整的模板

官网实例

//未使用render函数
Vue.component('anchored-heading', {
 template: '#anchored-heading-template',
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

//使用render函数
Vue.component('anchored-heading', {
 render: function (createElement) {
  return createElement(
   'h' + this.level,  // tag name 标签名称
   this.$slots.default // 子组件中的阵列
  )
 },
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

说明

区别:

  • 没有显示的模板内容,而是通过render方法生成
  • 使用了createElement方法

createElement方法,通过render函数的参数传递进来,有三个参数:

  • 第一个参数(必要参数):主要用于提供DOM的html内容,类型可以是字符串、对象或函数
  • 第二个参数(类型是对象,可选):用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类
  • 第三个参数(类型是数组,数组元素类型是VNode,可选):主要是指该结点下还有其他结点,用于设置分发的内容,包括新增的其他组件。注意,组件树中的所有VNode必须是唯一的

什么情况下适合使用render函数

在一次封装一套通用按钮组件的工作中,按钮有四个样式(success、error、warning、default)。首先,你可能会想到如下实现

<div class="btn btn-success" v-if="type === 'success'">{{ text }}</div>
 <div class="btn btn-danger" v-else-if="type === 'danger'">{{ text }}</div>
 <div class="btn btn-warning" v-else-if="type === 'warning'">{{ text }}</div>

这样写在按钮样式少的时候完全没有问题,但是试想,如果需要的按钮样式有十多个。那么template写死的方式就显得很无力了。遇上类似这样的情况,使用render函数可以说最优选择了。

根据实际情况改写按钮组件

首先render函数生成的内容相当于template的内容,故使用render函数时,在.vue文件中需要先把template标签去掉。只保留逻辑层。

export default {
 props: {
  type: {
   type: String,
   default: 'normal'
  },
  text: {
   type: String,
   default: 'normal'
  }
 },
 computed: {
  tag() {
   switch (this.type) {
    case 'success':
     return 1;
    case 'danger':
     return 2;
    case 'warning':
     return 3;
    default:
     return 1;
   }
  }
 },
 render(h) {
  return h('div', {
   class: {
    btn: true,
    'btn-success': this.type === 'success',
    'btn-danger': this.type === 'danger',
    'btn-warning': this.type === 'warning'
   },
   domProps: {
    innerText: this.text
   },
   on: {
    click: this.handleClick
   }
  });
 },
 methods: {
  handleClick() {
   console.log('-----------------------');
   console.log('do something');
  }
 }
};

根据组件化思维,能抽象出来的东西绝不写死在逻辑上。这里的clickHandle函数可以根据按钮的type类型触发不同的逻辑,就不多叙述了。

然后在父组件调用

<Button type="danger" text="test"></Button>

使用jsx

是的,要记住每个参数的类型同用法,按序传参实在是太麻烦了。那么其实可以用jsx来优化这个繁琐的过程。

render() {
  return (
   <div
    class={{
     btn: true,
     'btn-success': this.type === 'success',
     'btn-danger': this.type === 'danger',
     'btn-warning': this.type === 'warning'
    }}
    onClick={this.handleClick}>
    {this.text}
   </div>
  );
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 #Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 #Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 #Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 #Javascript
开发用到的js封装方法(20种)
Oct 12 #Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 #Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 #Javascript
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
Python标准库与第三方库详解
2014/07/22 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Python中交换两个元素的实现方法
2018/06/29 Python
详解Python字典小结
2018/10/20 Python
django解决跨域请求的问题
2018/11/11 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Python OS模块实例详解
2019/04/15 Python
Django视图扩展类知识点详解
2019/10/25 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
django 外键创建注意事项说明
2020/05/20 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
卫校毕业生自我鉴定
2013/10/31 职场文书
公司承诺书怎么写
2014/05/24 职场文书
军训拉歌口号
2014/06/13 职场文书
助学贷款贫困证明
2014/09/23 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
中班下学期个人总结
2015/02/12 职场文书
2015年团支部工作总结
2015/04/03 职场文书