Vue 函数式组件

吐槽…

以下是官方的例子,嗯…啥都看不懂…没有实现任何效果…

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
    )
  }
})

具体实现

参考了网上几篇帖子,实现了一个简单的效果

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,其实就是定义不同情况下要生成的模板标签,比如当传入的数据为空时,使用EmptyList中的模板生成,传入的数据是对象的时候,用TableList中的标签生成.等等.
2. 其次,在render中的appropriateListComponent函数就是先通过 context.props拿到传入的数据,这个参数的具体作用可以看官网,这里不多赘述.放一个官网地址Vue官网,然后根据拿到的数据判断它的类型,这里跟官方示例一样,都是判断是否为空,是否为对象等,然后根据不同的类型返回不同的模板,也就是上面的各种List
3. 接下来就可以返回创建节点了,createElement函数的第一个参数本来应该是要生成的标签名称,这里通过appropriateListComponent函数获得,第二个参数可以是对象(设置id,class,style等),也可以是一个数组,用于创建子节点.这里通过Array.apply(null)来达到这个目的,使用map来遍历items从而根据items 的值生成对应的项

结果截图

Vue初学者,若有错误,还望指正.若对您的学习生活有帮助,请点个赞再走呗