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 格式字符串的应用
Mar 29 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
elementui实现预览图片组件二次封装
Dec 29 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
咖啡的传说和历史
2021/03/03 新手入门
PHP array_push 数组函数
2009/12/26 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python占位符输入方式实例
2019/05/27 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
Python读写锁实现实现代码解析
2020/11/28 Python
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
室内设计自我鉴定
2013/10/15 职场文书
绿色环保标语
2014/06/12 职场文书
小学教师读书活动总结
2014/07/08 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
立项申请报告范本
2015/05/15 职场文书
入党培养人考察意见
2015/06/08 职场文书
高二化学教学反思
2016/02/22 职场文书
创业计划书之冷饮店
2019/09/27 职场文书