vue render函数 使用

语法

render:function(createElement){
	return createElement('标签名称',{标签属性},['标签内容'])
}

基本使用

new Vue({
	render:function(createElement){
		  const div = createElement(
              'div', // 标签名称
              { // 标签属性
                  class:'box',
                  style:{color: 'red',}
              },
              ['创建的div']  // 标签内容
          )
		// 或者  createElement(div',['创建的div']) 
		return div
	}
}).$mount('#app')

套娃

new Vue({
	render:function(createElement){
		  const header = createElement(
             'div', 
              {class:'header'},
              ['header 部分']
          )
          const center = createElement(
              'div', 
              {class:'center',style:{border:'1px solid gray'}},
              [
                  'center 部分',
                  createElement('button',['按钮1']),
                  createElement('button',{
                      style:{
                          marginLeft:'20px'
                      }
                  },['按钮2'])
              ] 
          )
          const footer = createElement(
              'div', 
              {class:'center'},
              ['footer 部分']
          )

          const con = createElement(
              'div', 
              {class:'container'},
              ['container 容器',header,center,footer]
          )
          return con  
	}
}).$mount('#app')

传入组件对象

<template id="temp">
    <div>
        组件对象 {{msg}}
    </div>
</template>

new Vue({
	render:function(createElement){
		return createElement({
             template:"#temp",
             data:()=>({
                 msg:' render 传入组件 对象'
             })
         })
	}
}).$mount('#app')

new Vue({
	render:function(createElement){
		
	}
}).$mount('#app')