render函数

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

前言

在大多数情况下我们只需要使用template来创建HTML模版即可，当然vue也推荐这种方式。那我们有接触过吗？ 当然是有的，我们用vue-cli搭建一个基础模版的时候在main.js里面就接触过：

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

官网是使用父组件传入level的值去渲染h1-h6标签的。那么我们可以得到在一些代码冗余且有高度重合的情况下就可使用它。

理解

render是一个函数，该函数的作用就是生成一个虚拟节点，同时传入一个回调函数并返回当前函数，回调函数接受三个参数：

• 一个 HTML 标签，组件设置，或一个函数
• 一个对应的数据对象，可以拿到外部组件传进来的数据，如 prop、slots等
• 子节点，可选【string ｜ array】，同时也是由传入的函数来完成

使用

这里我们使用一个简单的例子：

//HelloWorld.vue
<template>
  <div class="hello">
      <Rend v-for="it,index in h" :key="index" :level="it.level" :val="it.val"></Rend>
  </div>
</template>

<script>
import Rend from './rend.vue'
export default {
  name: 'HelloWorld',
  components:{
    Rend
},  
  props: {
    msg: String
  },
  data(){
   return{
    val:"",
    h:[{
       level:1,
       val:"这是h1"
    },
    {
       level:2,
       val:"这是h2"
    },
    {
       level:3,
       val:"这是h3"
    }]
   }
  },

}
</script>

// rend.vue
<script>
export default {
    name:"rend",
   props:['level','val'],
   // render作用:会return一个虚拟dom，return什么该组件就渲染什么
    render(h){
      return h(
         `h${this.level}`,
         this.val
      )
    }
}
</script>

这里我们新建一个rend.vue组件，在父组件里面进行循环，传入level值，这个值决定了子组件是什么标签，传入一个val,用于子组件展示的内容。子组件接受level和val，渲染标签和内容。 或者我们还可以渲染多个子节点：

//HelloWorld.vue
 <Rend ></Rend>

// rend.vue
<script>
export default {
    name:"rend",
    render(h){
      return h(
         'div',{
            style:{
                color:"red"
            }
         },
         [
            h('a',{attrs:{href:"baidu.com"},style:{color:"blue"}},"百度一下，你就知道"),
            h('p','p标签内容')
         ]
      )
    }
}
</script>

传入多级多节点只要在第三个传入一个数组皆可。里面照样是使用render函数传入的回调函数执行的。