分析vue渲染函数render的使用
对此感兴趣的朋友，看看idc笔记做的技术笔记！
1.什么是render函数？
vue通
这篇文章主要为大家详细介绍了分析vue渲染函数render的使用，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记！
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
【512pic.com温馨提示：图片暂缺】
此为渲染后结果。
然后，创建button-group组件，目标结果为
【512pic.com温馨提示：图片暂缺】
此处，不仅要在最外层包裹一层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
}, '内容',
)
}
渲染结果：
【512pic.com温馨提示：图片暂缺】
那怎样在外层div中渲染button组件呢？
render函数的第三个参数除了字符串，还可以传入VNode的数组。VNode就是vue中的节点。
此处，我们通过this.$slots.default获取所有插入到button-group组件内默认slot的button节点
代码如下：
render(createElement) {
return createElement(
'div', {
class: this.groupClass
}, this.$slots.default,
)
},
渲染结果：
【512pic.com温馨提示：图片暂缺】
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,
)
},
渲染结果：
【512pic.com温馨提示：图片暂缺】
并且根据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>
【512pic.com温馨提示：图片暂缺】
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持php教程。
注：关于分析vue渲染函数render的使用的内容就先介绍到这里，更多相关文章的可以留意
作者：喵哥笔记
