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 学习笔记 选择器之三
Jul 23 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
Javascript如何实现扩充基本类型
Aug 26 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
PHP array操作10个小技巧分享
2011/06/23 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
javascript读取xml
2006/11/04 Javascript
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
详解Python self 参数
2019/08/30 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
六月份红领巾广播稿
2014/02/03 职场文书
会计助理岗位职责
2014/02/17 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
装修活动策划方案
2014/08/27 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
雾霾停课通知
2015/04/24 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书