VUE-零散记录点之creatElement 和 render

214 阅读1分钟
有些时候可以使用函数式变成方便简化一些代码可以使用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')
            ]
        )
    }
})