vue中函数式组件

Vue官方文档的demo总是会省略很多东西，对于我们这样的小萌新十分不友好啊喂。函数式组件这块儿（链接https://cn.vuejs.org/v2/guide/render-function.html#函数式组件）这个demo啊，并没有实现什么实际的东西，还是需要自己去编写。我把它编辑好了，大家可以参考一下。

首先，html这块儿：

vue实例名为app，组件名为smart-list，这个组件可以根据我绑定的items来更改对应的不同内容，具体的见下面的js部分：

//当父组件传过来的是空items时
var EmptyList = {template: ‘

Empty list

’};
//当父组件传来的items元素为对象类型时
var TableList = ‘ul’
// 当父组件定义了isOrdered变量且为true
var UnorderedList = ‘ul’

//定义组件
Vue.component('smart-list', {
    //标记为函数式组件
    functional: true,

    //render函数
    render: function (createElement, context) {
        // console.log(context)//若不理解可以打印出来context来看看里面都有些什么东西

        //规定组件的渲染规则
        function appropriateListComp() {
            //获取父组件传来的数据
            var items = context.props.items;

            //若空，则返回前面定义的emptylist
            if (items.length === 0) return EmptyList;
            //若为对象
            if (typeof items[0] === 'object') return TableList;
            //其他
            return UnorderedList
        }

        //生成模板
        return createElement(
            //模板标记为渲染规则函数返回值
            appropriateListComp(),
            //模板子元素，返回一个数组
            Array.apply(null, {length: context.props.items.length}).map(function (value, index) {
                return createElement('li',context.props.items[index].name)
            })
        )
    },
    props: {
        items: {
            type: Array,
            required: true
        },
        isOrdered: Boolean
    }
});
new Vue({
    el: '#app',
    data:{
        items:[
            {
                name:'a',
                id:0
            },
            {
                name:'b',
                id:1
            },
            {
                name:'c',
                id:2
            }
        ]
    }
})

这里我们例子中的items数组中的元素为对象类型。
这里总共创建了3个模板子元素

• 最终浏览器中的渲染结果：

  • a
  • b
  • c

  以上。