Vue中的Render渲染函数的写法和规范

最新推荐文章于 2023-10-30 11:30:20 发布

程序媛-静儿

最新推荐文章于 2023-10-30 11:30:20 发布

阅读量5.5k

点赞数 1

分类专栏： vue 文章标签： render createElement h

本文链接：https://blog.csdn.net/qq_36711388/article/details/88980908

版权

Vue.js中的render函数用于用JavaScript生成DOM，替代了template。它没有v-if和v-for的直接API，需要借助JavaScript的条件语句和循环实现。同样，render函数未内置v-model支持，需要手动处理相关逻辑。参考链接提供了关于render函数使用的详细教程。

摘要由CSDN通过智能技术生成

VUE一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数

参考网址：https://www.cnblogs.com/tugenhua0707/p/7528621.html

return createElement('h1', this.title);

createElement 参数

// @return {VNode}
createElement(
  // {String | Object | Function}
  // 一个HTML标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数。该参数是必须的
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象，这样我们可以在template中使用这些属性，该参数是可选的。
  {

  },

  // {String | Array}
  // 子节点（VNodes）由 createElement() 构建而成。可选参数
  // 或简单的使用字符串来生成的 "文本节点"。
  [
    'xxxx',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'xxx'
      }
    })
  ]
)