到底什么是render函数?它就是一个方法,一个能创建组件的方法,一个能创建带有属性的组件的方法,其实也是一个普通的vue(因为一个render的vue中,可以写与vue一样的data,methods,props...)。
注意,有了render,你就不必写template了,因为它的参数中就是html模板内容
1、怎么写render
创建一个vue文件(可理解为,这就是一个普通的组件文件),然后在一个空白页中引入
<script>
export default {
render(createElement, context) {
var self = this
return createElement('div', '我是内容')
},
}
</script>
2 render中的createElement参数
2.1 基础设置
createElement(
'div', //1 标签名
{ //2 属性区
class:{},
style:{},
attrs:{}
},
'我是内容' //3 标签的内容区
)
createElement就是一个方法,其中接收三个参数,
- '标签名':合法的html标签,如div,p,span等等,同时,你也可以放自定义的组件
- 属性:class,style,其中class与style必须是遵循对象写法,或者数组写法,attrs(其它属性)其它的自定义属性,如<div data-id="123" id >...</div>,像基本属性和自定义的属性就可以放到attrs中设置,比如src,id,这些是常用的属性,data-id为自定义属性,通通放到attrs中
- 就是内容区,相当于Html标签的内容,默认为字符文字,如果有多个就必须以数组形式设置,注意,如果内容区为其它组件,一定要用createElement(组件)这种写法,否则报错eg:['<i>lalala</i>', createElement(MyUpload)]
<script>
import LlUpload from '@/components/ant/upload/LlUpload.vue'
export default {
render(createElement, context) {
var self = this
return createElement('div', ['我是内容', createElement(LlUpload)])
},
}
</script>
绿色框的内容就是我在render中引入的自己的组件
注意,如果你的内容区为【字符文字】,如['hello','world'....],那么它实际上就是一串文字,且不分开,如下图所示
2.2 属性如何设置
createElement中的第二个参数就是设置html的各种属性的,比如class,style,及其它属性。比如我要给我的组件加class,style,如下图所示,设置你的class,style(注意是对象)即可,仔细看它最终渲染的html
<script>
import LlUpload from '@/components/ant/upload/LlUpload.vue'
export default {
render(createElement, context) {
var self = this
return createElement(
'div',
{
class: 'my-test',
style: {
background: 'green',
},
},
['我是内容', 'hello', 'world', createElement(LlUpload)]
)
},
}
</script>
<style scoped>
.my-test {
color: red;
}
</style>
同理,除了class(my-test的样式就写在文件下方,跟普通vue文件一样,当然也可以是全局样式),style,其它属性用attrs:{}包裹起来,如id,src,自定义属性
<script>
import LlUpload from '@/components/ant/upload/LlUpload.vue'
export default {
render(createElement, context) {
var self = this
return createElement(
'div',
{
class: 'my-test',
style: {
background: 'green',
},
attrs: {
id: 'a001',
src: 'www.baidu.com',
'data-id': 'pro_0001',
},
},
['我是内容', 'hello', 'world', createElement(LlUpload)]
)
},
}
</script>
<style scoped>
.my-test {
color: red;
}
</style>
2.3 如何加事件?
其实也在createElement第二个参数中加,如下图
<script>
import LlUpload from '@/components/ant/upload/LlUpload.vue'
export default {
render(createElement, context) {
var self = this
return createElement(
'div',
{
class: 'my-test',
style: {
background: 'green',
},
attrs: {
id: 'a001',
src: 'www.baidu.com',
'data-id': 'pro_0001',
},
on: {
click: function () {
console.log(this)
console.log('你点击了我')
},
},
},
['我是内容', 'hello', 'world', createElement(LlUpload)]
)
},
}
</script>
<style scoped>
.my-test {
color: red;
}
</style>
注意,这个事件中,可没有this实例,其值为null,
其实,我的代码相当于给组件的根加了一个@click="..."事件,只做演示,了解即可。
其实还有其它的属性可以加,我就不列举了。
2.4 你也可以在render函数外面(同级)设置data,methods...就像写个普通vue一样,而render内部要想使用data,methods中的属性或方法怎么用呢,如下图所示
<script>
import LlUpload from '@/components/ant/upload/LlUpload.vue'
export default {
data() {
return {
show: true,
msg: 'hello test2.vue',
}
},
render(createElement, context) {
var self = this //此this像普通vue一样,可调用data或methods中的内容
return createElement(
'div',
{
class: 'my-test',
style: {
background: 'green',
},
attrs: {
id: 'a001',
src: 'www.baidu.com',
'data-id': 'pro_0001',
},
on: {
click: function () {
console.log(this)
console.log('你点击了我')
//调用data中定义的属性
console.log(self.show)
console.log(self.msg)
//调用methods中的方法
self.getA()
},
},
},
['我是内容', 'hello', 'world', createElement(LlUpload)]
)
},
methods: {
getA() {
let _this = this
console.log(_this)
},
},
}
</script>
<style scoped>
.my-test {
color: red;
}
</style>
结束,以上就是render的基础入门,具体的还请多去官网学习