作用：也用于构建组件，主要用来提升节点的性能，它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。
基本写法：
render函数的参数必须是 createElement
Vue.component('my-component', {
render: function (createElement) {
return createElement('div')
}
})
与组件的写法一致，只是把 template 换成了 render函数
render函数的参数必须是 createElement
render函数的参数必须是 createElement
createElement 是 vue 源码中已经定义好的一个方法
render函数return createElement( )的第一个参数
———— 必选参数，必须有
render函数return 一个 createElement，createElement是一个方法，它的参数可以是：String、Object、Function
- string ： html标签
- object：一个含有数据选项的对象
- function ： 返回一个含有数据选项的对象
Vue.component('my-component', {
render: function (createElement) {
// 参数可以是 String 、 Object 、 Function
//String ---- html标签
//Object---- 一个含有数据选项的对象
//Function ---- 返回一个含有数据选项的对象
// return createElement('div') //String
// return createElement({ //Object
// template: '<div>锄禾日当午</div>'
// })
let dom = function () {
return {
template: '<div>汗滴禾下土</div>'
}
}
return createElement(dom()) // Function
}
})
render函数return createElement( )的第二个参数
———— 可选参数，可有可无
第二个参数是数据对象，因为是对象，所以只能是 Object。
以下是数据对象的一些选项，不是全部，是一些常用的选项：
-
class：定义 class -
style：定义 style -
attrs：正常的html属性，即除了 style和class之外的属性，基本上都可以写在这里面 -
domProps：用来写原生的DOM属性。
Vue.component('my-component', {
render: function (createElement) {
//第二个参数，可选参数，第二个参数是数据对象，只能是 Object。
//以下是数据对象的一些选项，不是全部，是一些常用的选项
return createElement({
template: '<div>我是龙的传人</div>'
}, {
//定义class
class: {
foo: true, //为 true 表示有 foo 这个class
one: false
},
//定义style
style: {
color: 'red',
fontSize: '30px',
border: '1px solid black'
},
//正常的html属性，即除了 style和class之外的属性，基本上都可以写在这里面
attrs: {
id: 'two',
src: 'http://baidu.com'
},
//用来写原生的DOM属性
domProps: {
innerHTML: '<span style="color:blue;font-size:15px;">我是15px的蓝色</span>'
}
})
}
})
render函数return createElement( )的第三个参数
第三个参数类型：可以是 String 或者 Array（Array类型比较常用）
第三个参数代表子节点，作为构建函数的子节点来使用的
Vue.component('my-component', {
render: function (createElement) {
//第三个参数，可以是 String 也可以是 Array ，Array类型比较常用
//第三个参数代表子节点
return createElement('div', [ //第二个参数只能是对象，所以只要不是对象，就是第三个参数
createElement('h1', '我是h1标题'), //创建一个 h1 标签作为div的子节点
createElement('h3', '我是h3标题'), //创建一个 h3 标签作为div的子节点
createElement('h6', '我是h6标题') //创建一个 h6 标签作为div的子节点
])
}
})
this.$slots 在 render函数中使用
———— 即 插槽 在 render函数中的应用
<div id="app">
<my-component>
<p>锄禾日当午</p>
<p>汗滴禾下土</p>
<h1 slot="header">我是标题</h1>
<h3 slot="footer">我是结尾</h3>
</my-component>
</div>
<script>
Vue.component('my-component', {
render(createElement) {
let header = this.$slots.header //.$slots 返回的就是一个含有 VNode 的数组
let footer = this.$slots.footer
let main = this.$slots.default
return createElement('div', [
createElement('header', header), //所以这里的 header 相当于是第三个参数
createElement('main', main), //所以这里的 main 相当于是第三个参数
createElement('footer', footer) //所以这里的 footer 相当于是第三个参数
])
}
})
let app = new Vue({
el: '#app',
})
</script>
在 render函数中使用 props
<div id="app">
<my-component :show="show"></my-component>
<button @click="switchShow">点击切换</button>{{show}}
</div>
<script>
//需求：点击切换图片
Vue.component('my-component', {
props: ['show'],
render(createElement) {
let imgSrc
if (this.show) {
imgSrc = './001.jpg'
} else {
imgSrc = './002.jpg'
}
return createElement('img', {
attrs: {
src: imgSrc
},
style: {
width: '600px',
height: '400px'
}
})
}
})
let app = new Vue({
el: '#app',
data: {
show: false,
},
methods: {
switchShow() {
this.show = !this.show
}
}
})
</script>
作用域插槽在render函数中的使用
<div id="app">
<my-component>
<template scope="prop">
{{prop.text}}
{{prop.msg}}
</template>
</my-component>
</div>
<script>
Vue.component('my-component', {
render(createElement) {
return createElement('div', this.$scopedSlots.default({
text: '我是子组件传递过来的数据',
msg: '我是msg'
}))
}
})
let app = new Vue({
el: '#app',
data: {
},
})
</script>
vm.$scopedSlots
用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。
vm.$scopedSlots 在使用render函数开发一个组件时特别有用。
注意：
1、作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 undefined。
2、所有的
$slots现在都会作为函数暴露在$scopedSlots中。如果你在使用render函数，不论当前插槽是否带有作用域，都推荐通过 $scopedSlots 访问它们。
