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 前的按键判断代码
Mar 19 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
vue的mixins属性详解
Mar 14 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
vue中的inject学习教程
Apr 24 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
基于mysql的论坛(2)
2006/10/09 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
python中比较两个列表的实例方法
2019/07/04 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
医药类个人求职的自我评价
2014/02/12 职场文书
教师考核材料
2014/05/21 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
自主招生学校推荐信
2014/09/26 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
上诉答辩状范文
2015/05/22 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
JavaScript实现两个数组的交集
2022/03/25 Javascript