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技术-屏蔽类
Aug 15 Javascript
js查找父节点的简单方法
Jun 28 Javascript
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
Javascript实现计算个人所得税
May 10 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 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上传文件并存储到mysql数据库的方法
2015/03/16 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
pjblog中的UBBCode.js
2007/04/25 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python从零开始创建区块链
2018/03/06 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
python线性插值解析
2020/07/05 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
战友聚会邀请函
2014/01/18 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
golang json数组拼接的实例
2021/04/28 Golang