Vue 函數(shù)式組件

吐槽...

以下是官方的例子,嗯...啥都看不懂...沒有實現(xiàn)任何效果...

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('smart-list', {
  functional: true,
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  render: function (createElement, context) {
    function appropriateListComponent () {
      var 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(),
      context.data,
      context.children
    )
  }
})

具體實現(xiàn)

參考了網(wǎng)上幾篇帖子,實現(xiàn)了一個簡單的效果

html:

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

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:'李四'
                }
            ]
        }
    })

分析

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

結(jié)果截圖

在這里插入圖片描述

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