vue学习九：render方法渲染组件

最新推荐文章于 2025-06-19 10:07:10 发布

zerobaek

最新推荐文章于 2025-06-19 10:07:10 发布

阅读量876

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/zerobaek/article/details/88424881

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何将组件挂载到指定位置，并使用render函数进行组件的渲染过程。通过实例展示了如何定义组件模板对象，并在VM实例中通过render方法将其渲染到页面上。

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

vm实例挂载位置：

<div id="app">
  <p>444444</p>
  <!-- <login></login> -->
</div>

组件模板对象：

var login = {
  template: '<h1>这是登录组件</h1>'
}

vm实例：

var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  render: function (createElements) { // createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
    return createElements(login)
    // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
  },
  // components: {
  //   login
  // }
});

结果是替换了页面中 el 指定的那个容器