在render函数的方法中，参数必须是 createElement，createElement是一个function。
Vue.component('child', {
render: function (createElement) {
return createElement('h' + this.level, // 标签名称
this.$slots.default); // 子组件中的阵列
},
props: ['level']
})
createElement 的第一个参数
createElement 的第一个参数是必选的，它可以是 {String | Object | Function}中的任何一种 。
- String ---- html 标签
render: function (createElement) {
return createElement('h' + this.grade, // case1: String
this.$slots.default) // 子组件中的阵列
- Object ---- 一个含有数据选项的对象
render: function (createElement) {
return createElement({ //case2: Object
template: '<h2>h2</h2>'
})
}
- Function ----- 方法返回含有数据选项的对象
render: function (createElement) {
let func = function () {
return {
template: '<h3>h3</h3>' // case3: Function
}
};
return createElement(func())
}
createElement 的第二个参数
第二个参数是一个包含模板相关属性的数据对象（比如 class，style，attrs，domProps 等等），只能是对象。
render: function(createElement) {
return createElement(
'div',
// createElement 第二个参数是数据对象，只能是对象。
{
'class': { // 由于class 在JS 中是关键字，所以用了引号，但是实际上不加也不会报错
active: false,
error: true
},
style: {
fontSize: '24px',
color: '#b2d235'
},
attrs: { // 正常的HTML特性，比如 src
id: 'foo'
},
domProps: { // 用来写原生的 DOM 属性
innerHTML: '<p> hi ~ <p>'
}
}
)
}
}
createElement 的第三个参数
第三个参数也是可选 , 类型为 String 或 Array （Array用的更多一些），作为构建函数的子节点来使用的。
render: function (createElment) {
return createElment('div',[
createElment('p','我是子节点')
])
}
this.$slots在render函数中的应用
render: function(createElement) {
// debugger
let header = this.$slots.header;
console.log(header);
let main = this.$slots.default;
let footer = this.$slots.footer;
return createElement('div',[
createElement('header',header),
createElement('main',main),
createElement('footer',footer)
] )
}
在render函数中使用props传递数据
let componentA = {
props: ['show'],
render: function (createElement) {
let src;
if (this.show) {
src = './images/1.jpg'
} else {
src = './images/2.jpg'
}
return createElement('div', {
style: {
marginTop: '30px'
}
}, [
createElement('img', {
attrs: {
src: src
},
style: {
width: '400px'
}
})
])
}
}
v-model在render函数中的应用
<component-a v-model = "msg" :message = "msg"></component-a>
let componentA = {
props: ['message'],
render: function(createElement) {
return createElement ('input',{
domProps: {
value: this.message
},
on: {
input: () =>{
this.$emit('input',event.target.value)
}
}
})
}
}
作用域插槽在render函数中的使用
<component-a >
<template slot-scope = "prop">
{{ prop.msg }}
</template>
</component-a>
let componentA = {
render: function(createElement) {
return createElement('div',this.$scopedSlots.default({
msg:'xxxxx'
}))
}
}
函数化组件的应用
functional: true表示该组件无状态(没有响应式数据），无实例（没有this 上下文）
let componentA = {
functional: true, // functional: true,表示该组件无状态无实例
props: ['msg'],
render: function (createElement, context) {
return createElement('button', {
on: {
'click': () => {
console.log(context);
console.log(context.parent); // 父组件app
console.log(context.parent.count); //父组件的count: 0
console.log(context.props.msg); // 传过来的msg
console.log(this) // undefined
}
}
}, '点我看控制台有什么')
}
}
