rander 函数的参数必须是 createElement ，createElement 是 Vue 定义的一个函数。
createElement 函数的第一个参数（必传）
第一个参数可以是 String | Object | Function 。
如果参数是 String 类型，是一个 html 标签：
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
render(createElement){
return createElement('h1')
}
})
var app = new Vue({
el: '#app'
})
</script>
如果参数是 Object 类型，是一个含有数据选项的对象：
Vue.component('my-component', {
render(createElement){
return createElement({
template: '<h1>水调歌头</h1>'
})
}
})
如果参数是 Function 类型，是一个返回含有数据选项的对象的方法：
Vue.component('my-component', {
render(createElement){
var fn = ()=>{
return {
template: '<h1>水调歌头</h1>'
}
}
return createElement(fn())
}
})
createElement 函数的第二个参数（可选）
第二个参数是数据对象，只能是 Object 。
Vue.component('my-component', {
render(createElement){
return createElement({
template: '<div>我是红色</div>'
}, {
'class': {
foo: true,
baz: false
},
style: {
color: 'red',
fontSize: '16px'
},
// 正常的 html 特性
attrs: {
id: 'foo',
src: 'http://baidu.com'
},
// 用来写原生的 Dom 属性
domProps: {
innerHTML: '<span style="color:blue; font-size:18px">我是蓝色</span>'
}
})
}
})
createElement 函数的第三个参数（可选）
第三个参数代表子节点，可以是 String | Array 。
String 是文本节点，Array 是包含 VNode 的数组。
Vue.component('my-component', {
render(createElement){
return createElement('div', [
createElement('h1', '我是h1标题'),
createElement('h6', '我是h6标题')
])
}
})
this.$slots 在 render 函数中的应用
<div id="app">
<my-component>
<p>我是第一段内容</p>
<p>我是第二段内容</p>
<h1 slot="header">我是标题</h1>
<h5 slot="footer">我是底部内容</h5>
</my-component>
</div>
<script>
Vue.component('my-component', {
render(createElement){
return createElement('div', [
createElement('header', this.$slots.header),
createElement('main', this.$slots.default),
createElement('footer', this.$slots.footer)
])
}
})
var app = new Vue({
el: '#app'
})
</script>
在 render 函数中使用 props 传递数据
<div id="app">
<button @click="switchColor">点击切换图片</button>
<br>
<my-component :show="show"></my-component>
</div>
<script>
Vue.component('my-component', {
props: ['show'],
render(createElement){
let imgsrc = this.show ? '001.jpg' : '002.jpg'
return createElement('img', {
attrs: {
src: imgsrc
},
style: {
width: '600px',
height: '400px'
}
})
}
})
var app = new Vue({
el: '#app',
data: {show: true},
methods: {
switchColor(){
this.show = !this.show
}
}
})
</script>
v-model 在 render 函数中的使用
<div id="app">
<my-component :name="name" v-model="name"></my-component>
<br>{{name}}
</div>
<script>
Vue.component('my-component', {
props: ['name'],
render(createElement){
var _this = this
return createElement('input', {
domProps: {
value: _this.name
},
on: {
input(event){
_this.$emit('input', event.target.value)
}
}
})
}
})
var app = new Vue({
el: '#app',
data: {name: '喵喵'}
})
</script>
作用域插槽在 render 函数中的使用
<div id="app">
<my-component>
<template scope="prop">
{{prop.text}}
{{prop.msg}}
</template>
</my-component>
</div>
<script>
Vue.component('my-component', {
props: ['name'],
render(createElement){
return createElement('div', this.$scopedSlots.default({
text: '我是子组件传递过来的数据',
msg: 'message'
}))
}
})
var app = new Vue({
el: '#app'
})
</script>
函数化组件的应用
<div id="app">
<my-component :value="msg"></my-component>
</div>
<script>
Vue.component('my-component', {
functional: true, // 表示当前的 Vue 实例无状态，无实例。
props: ['value'],
render(createElement, context){
return createElement('button', {
on: {
click(){
console.log(context)
console.log(context.parent)
console.log(context.props.value)
}
}
}, '点我')
}
})
var app = new Vue({
el: '#app',
data: {
msg: '我是父组件的内容'
}
})
</script>
this.text === context.props.text
this.$slots.default === context.children
