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引用对象的方法代码
Aug 13 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
jQuery each函数源码分析
May 25 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
js实现随机点名程序
Sep 17 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 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中防止恶意刷新页面的代码小结
2012/10/31 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python重新加载模块的实现方法
2018/10/16 Python
python学习开发mock接口
2019/04/28 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
几个人围成一圈的问题
2013/09/26 面试题
会议邀请函范文
2014/01/09 职场文书
护理不良事件检讨书
2014/02/06 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
安全生产演讲稿
2014/05/09 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
八月一日观后感
2015/06/10 职场文书
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫