render函数

render函数中的参数是createElement,它是一个function
函数里面的第一个参数可以是String / Object / Function，第一个参数是必须的

Vue.component('child',{
    render:function(createElement){
//第一个参数可以是字符串--HTML标签
    // return createElement('div')
//object--一个含有数据选项的对象
    // return createElement({
    //  template:'<div>1111</div>'
    // })
//function--返回含有数据选项的对象
    var domFun = function(){
        return {
            template: '<div>1111</div>'
        }
     }
     return createElement(domFun())
    }
})

第二个参数是可选的，是数据对象

<div id="app">
        <child >
    
        </child>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('child',{
            render:function(createElement){
                //第二个参数必须是object
                return createElement({
                    template: '<div>我是一个粉刷匠</div>'
                },{
                    class: {
                        aaa: true,
                        bbb: false
                    },
                    style:{
                        fontSize:'24px',
                    },
                    //class和style以外的属性
                    attrs:{
                        id: 'ccc',
                        src: 'http://...'
                    },
                    //用来写原生dom属性
                    domProps:{
                        innerHTML: '<span style="color:pink">我要变成粉红色</span>'
                    }
                })
            }
        })
        var app = new Vue({
            el: '#app',
            data: {
                levels: 1
            }
        })
    </script>

第三个参数也是可选的，代表子节点，可以是String / Array

<div id="app">
        <child></child>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('child',{
            render:function(createElement){
                return createElement('div',[
                    createElement('h1','我是标题1'),
                    createElement('h5','我是标题5')
                ])
            }
        })
        var app = new Vue({
            el: '#app',
            data:{

            }
        })
    </script>

slot插槽的使用

<div id="app">
        <child>
            <h1 slot="header">1级标题</h1>
            <p>内容1111.。。。。</p>
            <p>内容2222.。。。。。。</p>
            <h6 slot="footer">终极标题</h6>
        </child>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('child',{
            render:function(createElement){
                var header = this.$slots.header
                var footer = this.$slots.footer
                var main = this.$slots.default //默认的部分
                return createElement('div',[
                    createElement('header',header),
                    createElement('main',main),
                    createElement('footer',footer)
                ])
            }
        })
        var app = new Vue({
            el: '#app',
            data:{

            }
        })
    </script>

使用props传递数据

demo

作用域插槽

1. 在HTML模板上通过slot-scope定义一个自定义的命名
2. 在render函数中用this.$scopeSlots.default({})拿到内容
3. 使用文本插值的方式展示获取内容下的具体内容
   demo
   v-model在render函数中的使用

函数化组件
functional:true 表示当前的vue实例屋状态，无实例