vue render函数

render

vue中的template在vue内部会被编译成render函数

<script>
export default {
  render(createElement){//使用render函数创建h1标签
    return createElement('h1',{},'hello vue')
  }

}
</script>

<style>

</style>

使用render函数可以动态的创建标签

<script>
export default {
  props:{
    tag:String,
  },
  render(createElement){//使用render函数创建h1
    return createElement(this.tag,{},'hello vue')
  }

}
</script>

<style>

</style>

在app.vue里引入components

<template>
<div id="app">
  <h1>hello</h1>
  <Heading tag="h1"/>
  <!--通过修改tag的值动态的改变标签-->
  <Heading tag="h3"/>
</div>
</template>

<script>
import Heading from './Heading.vue'
export default {
  components:{
    Heading
  }
 
}
</script>

<style>

</style>

不仅可以创建标签，div，还可以创建组件

<script>
import Test from './Test'
export default {
  render(createElement){//使用render函数创建组件Test
    return createElement(Test,{
        props:{
            msg:"hello"
        }
    })
  }

}
</script>

<style>

</style>