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 相关文章推荐
javascript document.images实例
May 27 Javascript
javascript 面向对象编程基础:封装
Aug 21 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
js选择器全面解析
Jun 27 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
express异步函数异常捕获示例详解
Nov 30 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分页思路以及在ZF中的使用
2012/05/30 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
JavaScript实现区块链
2018/03/14 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
python实现telnet客户端的方法
2015/04/15 Python
Python实现股市信息下载的方法
2015/06/15 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
Python坐标线性插值应用实现
2019/11/13 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
财务出纳员岗位职责
2013/11/26 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
速龙x4-860k处理器相当于i几
2022/04/20 数码科技