Vue 函數(shù)式組件

吐槽...

以下是官方的例子,嗯...啥都看不懂...沒(méi)有實(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
    )
  }
})

具體實(shí)現(xiàn)

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

結(jié)果截圖

在這里插入圖片描述

Vue初學(xué)者,若有錯(cuò)誤,還望指正.若對(duì)您的學(xué)習(xí)生活有幫助,請(qǐng)點(diǎn)個(gè)贊再走唄