Vue函數式組件 簡單實現

html:

    <div id="root">
        <smart :items=items></smart>
    </div>

js:

  <script>
        let EmptyList = 'p';
        let TableList = 'ul';
        let OrderedList = 'ul';
        let UnorderedList = 'ol';
        Vue.component('smart', {
            functional: true,
            props: {
                items: {
                    type: Array,
                    required: true
                },
                isOrdered: Boolean
            },
            render: function(createElement, context) {
                function appropriateListComponent() {
                    let items = context.props.items;

                    if (items.length === 0) return EmptyList;
                    if (typeof items[0] === 'object') return TableList;
                    if (context.props.isOrdered) return OrderedList;

                    return UnorderedList;
                }

                return createElement(
                    appropriateListComponent(),
                    Array.apply(null, {
                        length: context.props.items.length
                    }).map(function(value, index) {
                        return createElement('li', context.props.items[index].name)
                    })
                )
            }
        })
        var vm = new Vue({
            el: '#root',
            data: {
                items: [{
                    name: '張三'
                }, {
                    name: '李四'
                }]
            }
        })
    </script>

分析
首先開頭的那么多List,其實就是定義不同情況下要生成的模板標簽,比如當傳入的數據為空時,使用EmptyList中的模板生成,傳入的數據是對象的時候,用TableList中的標簽生成.等等.
其次,在render中的appropriateListComponent函數就是先通過 context.props拿到傳入的數據,這個參數的具體作用可以看官網,這里不多贅述.放一個官網地址Vue官網,然后根據拿到的數據判斷它的類型,這里跟官方示例一樣,都是判斷是否為空,是否為對象等,然后根據不同的類型返回不同的模板,也就是上面的各種List
接下來就可以返回創建節點了,createElement函數的第一個參數本來應該是要生成的標簽名稱,這里通過appropriateListComponent函數獲得,第二個參數可以是對象(設置id,class,style等),也可以是一個數組,用於創建子節點.這里通過Array.apply(null)來達到這個目的,使用map來遍歷items從而根據items 的值生成對應的項

結果截圖

Vue初學者,若有錯誤,還望指正.若對您的學習生活有幫助,請點個贊再走唄