render函數(shù)中的參數(shù)是createElement,它是一個(gè)function
函數(shù)里面的第一個(gè)參數(shù)可以是String / Object / Function啥容，第一個(gè)參數(shù)是必須的

Vue.component('child',{
    render:function(createElement){
//第一個(gè)參數(shù)可以是字符串--HTML標(biāo)簽
    // return createElement('div')
//object--一個(gè)含有數(shù)據(jù)選項(xiàng)的對(duì)象
    // return createElement({
    //  template:'<div>1111</div>'
    // })
//function--返回含有數(shù)據(jù)選項(xiàng)的對(duì)象
    var domFun = function(){
        return {
            template: '<div>1111</div>'
        }
     }
     return createElement(domFun())
    }
})

第二個(gè)參數(shù)是可選的，是數(shù)據(jù)對(duì)象

<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){
                //第二個(gè)參數(shù)必須是object
                return createElement({
                    template: '<div>我是一個(gè)粉刷匠</div>'
                },{
                    class: {
                        aaa: true,
                        bbb: false
                    },
                    style:{
                        fontSize:'24px',
                    },
                    //class和style以外的屬性
                    attrs:{
                        id: 'ccc',
                        src: 'http://...'
                    },
                    //用來(lái)寫(xiě)原生dom屬性
                    domProps:{
                        innerHTML: '<span style="color:pink">我要變成粉紅色</span>'
                    }
                })
            }
        })
        var app = new Vue({
            el: '#app',
            data: {
                levels: 1
            }
        })
    </script>

第三個(gè)參數(shù)也是可選的大溜，代表子節(jié)點(diǎn)樟结，可以是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','我是標(biāo)題1'),
                    createElement('h5','我是標(biāo)題5')
                ])
            }
        })
        var app = new Vue({
            el: '#app',
            data:{

            }
        })
    </script>

slot插槽的使用

<div id="app">
        <child>
            <h1 slot="header">1級(jí)標(biāo)題</h1>
            <p>內(nèi)容1111.无蜂。喇完。。蹬耘。</p>
            <p>內(nèi)容2222.芝雪。。婆赠。绵脯。。休里。</p>
            <h6 slot="footer">終極標(biāo)題</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 //默認(rèn)的部分
                return createElement('div',[
                    createElement('header',header),
                    createElement('main',main),
                    createElement('footer',footer)
                ])
            }
        })
        var app = new Vue({
            el: '#app',
            data:{

            }
        })
    </script>

使用props傳遞數(shù)據(jù)

demo

作用域插槽

1. 在HTML模板上通過(guò)slot-scope定義一個(gè)自定義的命名
2. 在render函數(shù)中用this.$scopeSlots.default({})拿到內(nèi)容
3. 使用文本插值的方式展示獲取內(nèi)容下的具體內(nèi)容
   demo
   v-model在render函數(shù)中的使用

函數(shù)化組件
functional:true 表示當(dāng)前的vue實(shí)例屋狀態(tài)蛆挫，無(wú)實(shí)例