render
在我们的组件中，可以使用render来代替template
常规组件
<template>
<div></div>
</template>
render组件
export default {
render (createElement) {
return createElement('div', {
}, "")
}
}
createElement
在render函数中有一个函数参数，这个函数调用时，可以传入三个参数
- 标签名
- 配置 Object 可选
- 子节点 String|Array 可选
如果第二个参数不写，直接写第三个，如createElement(“div”, “内容”)，则这个内容会直接被当成第三个参数（第二个参数如果不是对象，则被当成第三个参数使用）
createElement('标签名(支持组件名)', {
// 与 `v-bind:class` 的 API 相同，
// 接受一个字符串、对象或字符串和对象组成的数组
'class': {
foo: true,
bar: false
},
// 与 `v-bind:style` 的 API 相同，
// 接受一个字符串、对象，或对象组成的数组
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML attribute
attrs: {
id: 'foo'
},
// 组件 prop
props: {
myProp: 'bar'
},
// DOM property
domProps: {
innerHTML: 'baz'
},
// 事件监听器在 `on` 内，
// 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
// 需要在处理函数中手动检查 keyCode。
on: {
click: this.clickHandler
},
// 仅用于组件，用于监听原生事件，而不是组件内部使用
// `vm.$emit` 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
// 赋值，因为 Vue 已经自动为你进行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// 作用域插槽的格式为
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其它组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其它特殊顶层 property
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
// 那么 `$refs.myRef` 会变成一个数组。
refInFor: true
}, '内容'|[])
// 数组中可以继续包含createElement()作为它的子节点
functional
如果我们想要在render函数中获取到组件中的相关属性，如props，我们可以设置functional: true
export default {
functional: true,
props: {
key: "value"
},
render (creaetElement, ctx) {
// 这个ctx中就包含了我们的props等相关内容
}
}
只有在我们想要实现对应自己封装可复用组件时，需要通过js配置传递过去渲染结构，这个时候，我们才会使用render