render 函数使用

2022-03-31 11:02:56 阅读：152 来源： 互联网

VUE一般使用template来创建组件，然后VUE渲染在页面上。

如果某些环境下，需要使用JS来创建html的DOM节点，这时候要使用render函数了:

详细：

字符串模板之外的另一种选择，允许你充分利用 JavaScript 的编程功能

<div id="app" class="demo">
  <my-title blog-title="A Perfect Vue"></my-title>
</div>

const { createApp, h } = Vue
const app = createApp({})
app.component('my-title', {
  render() {
    return h(
      'h1',           // 标签名称
      this.blogTitle  // 标签内容
    )
  },
  props: {
    blogTitle: {
      type: String,
      required: true
    }
  }
})

app.mount('#app')

render 函数的优先级高于根据 template 选项或挂载元素的 DOM 内 HTML 模板编译的渲染函数。

h函数千万别忘记导入。

render 函数其实也可以进行一个嵌套。

关于h函数的用法：

详细浏览官网文档：https://v3.cn.vuejs.org/guide/render-function.html

过程：

template -> render -> h -> 虚拟DOM(JS对象) -> 真实DOM -> 渲染到页面

标签：函数,render,DOM,app,渲染,template,使用
来源： https://www.cnblogs.com/bi-hu/p/16080761.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

render 函数使用