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 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
jQuery 表单验证扩展(三)
Oct 20 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
Node实现搜索框进行模糊查询
Jun 28 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 缓冲的免费实现方法
2006/10/09 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
vue中如何使用ztree
2018/02/06 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
大学生会计职业生涯规划范文
2014/02/28 职场文书
学雷锋演讲稿
2014/03/04 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书