Vue渲染函数render

渲染函数render

render 函数 跟 模板（template） 都是用来创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数（比如注册h1-h6的组件）

使用

• render函数接收一个参数 createElement(通常vue中简写为h) 它也是一个函数，h有三个参数

Vue.component('el-h', {
    render: function (h) {
        return h(
            //1. 第一个参数可以是一个HTML标签名、组件选项对象，
            //html标签
            //'div'
            //组件的一个配置对象
            //index
            //2. 第二个参数，1中渲染的标签的属性【可选】，不使用此参数，用 null 占位
            'class': {
                foo: true,
                bar: false
            },
            style: {
                color: 'red',
                fontSize: '14px'
            },
            // 3. 第三个参数，1中渲染的标签的子元素数组【可选】，不使用此参数，用 null 占位 或不写
            this.$slots.default//默认插槽
        )
    }
})
//组件配置对象
let index = {
    template:`<h1>组件配置项</h1>`,
    data(){
        return {}
    }
}