Vue render函数

186 阅读1分钟

render函数在.vue单文件组件局部组件全局组件中都可以用

.vue单文件组件<template>优先级更高

在线示例

render函数中的参数

  • 第一个参数createElement函数,别名h函数

createElement第一个参数可以是字符串可以是对象可以是方法

render(h){
	return h('h1') 
}
-------------------------------
render(h){
	return h({
    	template:`<h1>111</h1>`
    }) 
}
-------------------------------
render(h){
// 声明一个方法打包整个模板
	let dom=function(){
    	return{
        	template:`<h1>111</h1>`
        }
    }
	return h(dom()) 
}

createElement第二个参数可选,用于设置一些属性

render(h){
	return h('div',{
    	class:{
        	foo:true,
            aaa:false
		},
        style:{
        	color:'red',
            fontSize:'16px'
        }
        attrs:{
        	id:'foo'
        }
    }) 
}

createElement第三个参数可选,是一个数组,用于设置子节点

render(h){
	return h('div',[
    h('h1','我是h1标题'),
    h('h2','我是h2标题')
    ]) 
}

<div><h1>我是h1标题</h1><h2>我是h2标题</h2></div>