详解vue渲染函数render的使用


Posted in Javascript onDecember 12, 2017

1.什么是render函数?

vue通过 template 来创建你的 HTML。但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力。此时,需要用render来创建HTML。

比如如下我想要实现如下html:

<div id="container">
 <h1>
  <a href="#" rel="external nofollow" rel="external nofollow" >
   Hello world!
  </a>
 </h1>
</div>

我们会如下使用:

<!DOCTYPE html>
<html>
 <head>
  <title>演示Vue</title>
  <style>
   
  </style>
 </head>
 <body>
  <div id="container">
   <tb-heading :level="1">
    <a href="#" rel="external nofollow" rel="external nofollow" >Hello world!</a>
   </tb-heading>
  </div>
 </body>
 <script src="./vue.js"></script>

 <script type="text/x-template" id="templateId">
  <h1 v-if="level === 1">
   <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
   <slot></slot>
  </h2>
 </script>
 <script>
  Vue.component('tb-heading', {
   template: '#templateId',
   props: {
    level: {
     type: Number,
     required: true
    }
   }
  });
  new Vue({
   el: '#container'
  });
 </script>
</html>

 2.例:

遇到的问题:

在工作中,我创建了一个button组件,又创建了一个button-group组件

button组件较为简单,就是一个可以输入type/size/icon等属性的button

详解vue渲染函数render的使用

此为渲染后结果。

然后,创建button-group组件,目标结果为

详解vue渲染函数render的使用

此处,不仅要在最外层包裹一层div,还要在每个button组件外层包裹一层p标签。此处,就需要使用render函数了。

既然有了render函数,就不再需要template标签了,vue文件中只需要script标签(该组件style是全局的)

button-group.vue如下

<script>
 export default {
  name: "XButtonGroup",
  props: {
   compact: { //自定义的button-group属性,影响其classname
    type: Boolean,
    default: true
   }
  },
  render(createElement) {
   //此处创建element
  },
  computed: {
   groupClass() {
    const className = ["field"];  //通过计算属性监听compact属性传入className
    className.push(this.compact ? "has-addons" : "is-grouped");
    return className;
   }
  }
 };
</script>

接下来就要看render函数了。

render函数中的createElement方法有三个参数。第一个参数为外层标签名,第二个为外层标签的属性对象,第三个为外层标签中的内容

所以第一步

render(createElement) {
   return createElement(
    'div', {
     class: this.groupClass
    }, '内容',
   )
  }

渲染结果:

详解vue渲染函数render的使用

那怎样在外层div中渲染button组件呢?

render函数的第三个参数除了字符串,还可以传入VNode的数组。VNode就是vue中的节点。

此处,我们通过this.$slots.default获取所有插入到button-group组件内默认slot的button节点

render(createElement) {
   return createElement(
    'div', {
     class: this.groupClass
    }, this.$slots.default,
   )
  },

渲染结果:

 详解vue渲染函数render的使用

button已经正确渲染到了外层div中。但是怎么在每个button外层包裹一层元素呢。createElement会创建新的VNode,而render函数第三个参数需要VNode数组,所以我们需要传入一个由createElement返回值组成的数组。

render(createElement) {
   //遍历每一个VNode,用createElement函数在外层包裹class为control的p标签,组成新的VNode数组
   const arry = this.$slots.default.map(VNode => {
    return createElement('p', {
     class: 'control'
    }, [VNode])
   })
   return createElement(
    'div', {
     class: this.groupClass
    }, arry,
   )
  },

渲染结果:

 详解vue渲染函数render的使用

并且根据button-group的compact属性可以切换不同的class,生成不同的效果

<x-button-group :compact="true">
  <x-button v-for="(item,index) in buttonType" :key="index" :type="item">{{item}}</x-button>
</x-button-group>
<x-button-group :compact="false">
  <x-button v-for="(item,index) in buttonType" :key="index" :type="item">{{item}}</x-button>
</x-button-group>

详解vue渲染函数render的使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
谈谈vue中mixin的一点理解
Dec 12 #Javascript
Vue集成Iframe页面的方法示例
Dec 12 #Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 #Javascript
Vue调试神器vue-devtools安装方法
Dec 12 #Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 #Javascript
javascript实现循环广告条效果
Dec 12 #Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 #Javascript
You might like
PHP动态变静态原理
2006/11/25 PHP
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
深入解析php模板技术原理【一】
2008/01/10 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python检查ping终端的方法
2019/01/26 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
舞蹈专业求职信
2014/06/13 职场文书
假释思想汇报范文
2014/10/11 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书