详解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 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
Vue异步组件使用详解
Apr 08 Javascript
vuex 的简单使用
Mar 22 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
微信小程序自定义导航栏
Dec 31 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
escape unescape的php下的实现方法
2007/04/27 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
python字符串,数值计算
2016/10/05 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
python二维图制作的实例代码
2020/12/03 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
伊琍体标语
2014/06/25 职场文书
战略合作意向书
2014/07/29 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
中学团支部工作总结
2015/08/13 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs