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 Archive Network 集合
May 12 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
jquery 使用点滴函数代码
May 20 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 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
基于Zend的Captcha机制的应用
2013/05/02 PHP
yii操作cookie实例简介
2014/07/09 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
angular.bind使用心得
2015/10/26 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
Django框架视图函数设计示例
2019/07/29 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
顶碗少年教学反思
2014/02/21 职场文书
表决心的诗句大全
2014/03/11 职场文书
低碳环保口号
2014/06/12 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
教师节祝酒词
2015/08/11 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery