有些时候可以使用函数式变成方便简化一些代码可以使用render函数
在组件中render函数返回一个Vnode节点,该函数有1个参数。
就是上面的createElement
creatElement一共接受3个参数
creatElement('html标签名','该标签上的属性','该标签下的子级,必须是数组格式的Vnode结构')
所以render函数可以写为
Vue.component('child',{
function:true,
render: function (createElement) {
//如果想访问上下文的一些数据可以使用 this['$options'].parent 访问到父级别组件数据
// 有些简写成
//render:h=>h(APP)
return createElement(
'div',
{
//该标签一些属性
class:['otot'],
style:{
color:'red',
fontSize:'28px'
},
domProps: {}
},
[
//该标签下子集
createElement('h1',[
createElement(
'span',{
class:['mySpan']
},
[
]
)
]),
createElement('h1','ok')
]
)
}
})