详解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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 Javascript
谈谈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的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP序列化操作方法分析
2016/09/28 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python之父谈Python的未来形式
2016/07/01 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
关于中国梦的演讲稿
2014/04/23 职场文书
标准毕业生自荐信
2014/06/24 职场文书
群众路线剖析材料
2014/09/30 职场文书
党员示范岗材料
2014/12/19 职场文书
中学语文教学反思
2016/02/16 职场文书
Python读取和写入Excel数据
2022/04/20 Python