Render函数的用法及理解

上代码

<!-- <template>
  <div class="container">
      <h1>1</h1>
  </div>
</template> -->
 <!-- 这里就不需要上面的 模板方式，直接通过render函数来生成组件 --->
<script>
export default {
  data () {
    return {

    }
  },
  components: {

  },

  render(createElement){
      //第一个参数：可传标签/组件名，第二个参数：选项，第三个子元素
      return createElement('h1',{},'Hello Render')
  } 
}  
</script>

<style scoped>

</style>

render的内容1：

  render(createElement){
    //加点变化
    let obj = {
      style:"color:#CCCCCC;border:1px solid red",
    }
      //第一个参数：可传标签/组件名，第二个参数：选项，第三个子元素
      return createElement('h1',obj,'Hello Render')
  }

render的内容2：

   props:{
         tag:String //假设传递一个 h2
    },
    render(createElement){
        
      //第一个参数：可传标签/组件名，第二个参数：选项，第三个子元素
      return createElement(this.tag,{},'Hello Render')
  }

调用的是时候

 

 效果：

 

 

 

标签：Hello,return,函数,render,用法,参数,createElement,Render
来源： https://www.cnblogs.com/youmingkuang/p/16077295.html