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 相关文章推荐
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
swiper实现导航滚动效果
Dec 13 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
Ionic快速安装教程
2016/06/03 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
详解vue组件基础
2018/05/04 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python实现的生成word文档功能示例
2019/08/23 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
Etam德国:内衣精品店
2019/08/25 全球购物
应届生简历中的自我评价
2014/01/13 职场文书
通信生自我鉴定
2014/01/18 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers