详解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 相关文章推荐
js null,undefined,字符串小结
Aug 21 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
PHP之变量、常量学习笔记
2008/03/27 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Python中整数的缓存机制讲解
2019/02/16 Python
python写日志文件操作类与应用示例
2019/07/01 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
马智宇结婚主持词
2014/04/01 职场文书
小小商店教学反思
2014/04/27 职场文书
法制宣传月活动方案
2014/05/11 职场文书
博士生专家推荐信
2014/09/26 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL