Vue(2) render函数

先看一点点代码

Vue.component('组件名',{
    // 配置参数
    data(){
        return{}
    }，
    props:[],
    methods:{},
    
    // 渲染标签元素
    render(h){
        return h('标签名',{
            class:{},
            style:{},
            ref:'ref',
            on:{
                click:()=>{},
                dblclcik:()=>{},
                change:()=>{},
                ...
            }，
            ...
          },['子标签','子标签'])
    }
})
复制代码

h 是createElement的简写
主要说的是h（createElement）函数，有三个参数：

（1）标签名，值的类型有：字符串（String），对象（Object），函数（Function）。必选项
（2）是一个对象，可以给这个标签设置一些样式，类名，ref，事件等，官网有好多。值的类型是对象（Object）。可选项
（3）子标签，也可以是h函数。值的类型有：字符串（String，），数组（Array）如:[h(),h(),h()]。可选项
复制代码

第一个参数,第三个参数，如果是字符串该怎么写：

h('div',{},'子节点：可以是标签节点，可以是文本节点，也可以是注释节点')
复制代码

第一个参数是对象时：

h({ 
   template: '<div>对象</div>'
})
复制代码

第一个参数是函数时，返回一个对象，这个函数是需要调用的：

h((()=>{
    return{
        template: '<div>函数</div>'
    }
})())
复制代码

第一个参数也可以是一个组件的名字，字符串：

Vue.component('order',{
    name:'aaaaa',
    render(h){
            return h('div',{
                on:{
                    click:(a,b)=>{
                        console.log(a,b)
                        console.log(arguments)
                    }
                }
            },'订单组件')
    }
})

h('order',{
    nativeOn: {
       click: ()=>{}
    },
})
复制代码

第三个参数是数组时：

h('div',{},[h('span'),h('li')])
// jsx
h('div',{},[arr.map((item)=>{
    return <li>{item}</li>
})])
复制代码

完整例子（环境自己搭）：

Vue.component('order',{
	name:'aaaaa',
	render(h){
            return h('div',{
                    on:{
                        click:(a,b)=>{
                            console.log(a,b)
                            console.log(arguments)
                        }
                    }
            },'订单组件')
	},
	methods:{
            open(){
                console.log(arguments)
            }
	},
})
Vue.component('names',{
	data(){
            return{
                active:false,
            }
	},
	props:{
		level:{
                    type:Number
		},
		list:{
                    type:Array
		}
	},
	methods:{
            showName(obj){
                console.log(obj)
                this.active = true;
            }
	},
	mounted() {
            console.log(1)
	},
	created () {
            console.log(2)	
	},
	render(h){
		return h('ul',
                    {
                        style:{'list-style':'none'},
                        attrs:{'id':this.level},
                        ref:'ul',
                        props: {
                                myProp: 'bar'
                        },
                    },
                    [
                        this.list.map((item,index)=>{
                            return h('li',{
                                    style:{'list-style':'none','background-color':this.active?'green':'red'},
                                    key: item.id,
                                    on: {
                                            dblclick: ()=>{this.showName(item)}
                                    }
                                },[item.name,item.age,item.like])
                        }),
                        h('order',{
                            nativeOn: {
                                click: ()=>{}
                            },
                        }),
                        h(
                            (()=>{
                                    return{
                                            template: '<div>函数</div>'
                                    }
                            })()
                        ),
                        h('div',{},[[1,2,3].map((i)=>`<p>${i}</p>`)])
                    ])
	},
})

				
let obj = {
	'1':(a,b)=>{
            return a+b
	},
	'2':()=>{
            return "2"
	}
}			
var vm = new Vue({
    el:"#app",
    data:{
        list:[
            {id:0,name:'吕布',age:18,sex:'男',like:'喜欢戏貂蝉！'},
            {id:1,name:'貂蝉',age:18,sex:'女',like:'喜欢遛狗！'},
            {id:2,name:'鲁班',age:18,sex:'男',like:'峡谷全是爹！'},
            {id:3,name:'兰陵王',age:18,sex:'男',like:'看不见我，看不见我！'},
            {id:4,name:'周瑜',age:18,sex:'男',like:'放火放火放火！'},
            {id:5,name:'瑶妹',age:18,sex:'女',like:'我骑你！'}
        ]
    },
    methods:{
        open(){
            console.log(arguments)
        },

        a(param){
            return obj[param](1,2);
        }
    },
    mounted(){
        console.log(this.a(1))
    }
})
复制代码

适用场景：

容我想想
复制代码

内容尚未完成！！！
只供自己学习！！！