Web前端vue必做笔记之一:Vue中的Render函数_vue render 菜鸟教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42302014/article/details/121566636

本文是Web前端Vue笔记的一部分，重点探讨Vue中的Render函数。介绍了如何在不使用组件的情况下渲染模板，并在组件JS和App.vue中应用Render函数，同时讲解了事件处理函数的绑定方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web前端vue必做笔记之一:Vue中的Render函数

首先我们在不使用组件的方式来渲染模版
组件js中

<script>

export default {
    props:{
          tag:String,
    },

    //使用这个render函数可以动态创建标签
       render(createElement){
            return createElement("this.String",{},"hello 小明"); //第一个参数为，标签或者组件名，第二个参数为选项，第三个参数为子元素
      }


</script>

App.vue中

<template>
      <div id="app">
             <h1>什么是Vue中的Render函数</h1>
             <Heading tag="h1"></Heading>
      </div>
</template>

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

<style>
  #app{
         text-align: center;
  }
</style>

还可以进行事件处理函数的绑定

<script>

export default {
    props:{
          tag:String,
    },
    data(){
        return{
              people:["小明","小红","小军"]
        }   
    },

    render(createElement){
          return createElement(this.tag,{},this.people.map(name => createElement("li",{attrs: {class:'test'}, on:{
              click: ()=>{
                  console.log("li clicked");
              }
          } },`${name}`)))  //使用map对数组people进行遍历，并给每一项创建一个元素，这个attrs就可以添加一些属性 ，`${name}`为内容
    }
}
</script>