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最新动画教程+iso光盘下载
Jan 22 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 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
PHP易混淆知识整理笔记
2015/09/24 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
理解JS绑定事件
2016/01/19 Javascript
JavaScript File分段上传
2016/03/10 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
详解Python time库的使用
2019/10/10 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
销售主管竞聘书
2014/03/31 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书