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 相关文章推荐
常用js脚本
Dec 03 Javascript
JavaScript 全角转半角部分
Oct 28 Javascript
js快速排序的实现代码
Dec 08 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
Vue与React的区别和优势对比
Dec 18 Vue.js
详解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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php.ini中文版
2006/10/09 PHP
一个域名查询的程序
2006/10/09 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
浅谈js中的this问题
2017/08/31 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python简单分割文件的方法
2015/07/30 Python
python制作websocket服务器实例分享
2016/11/20 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
社区中秋节活动方案
2014/01/29 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书