Vue - 得到组件渲染的DOM

得到组件渲染的DOM

主要用到2个语法

render 和 template

具体参考这篇文章。简单来说，Vue 在生成虚拟 DOM 时，有 render() 则运行它，没有则使用 template 的配置编译为 render() 函数，再生成虚拟DOM。

所以单文件组件经过编译，会将模板编译为 render 函数。在 import 一个组件后，打印出的对象中有 render 属性。

vm.$mount()

官网参考

如果在调用时没有传参，模板将被渲染为文档之外的的元素。所以元素是生成了，只是没有挂载。而这个元素可以通过 vm.$el 获取。

实现

import HelloWorld from './components/HelloWorld.vue'

function getComponentRootDom(comp, props) {
  const vm = new Vue({
    render: (h) => h(comp, { props })
  })
  vm.$mount()
  return vm.$el
}

const dom = getComponentRootDom(HelloWorld, { msg: '这是 msg' })
console.log(dom)
1
2
3
4
5
6
7
8
9
10
11
12

用途：

当使用服务的方式来使用组件时，比如 Message 弹窗消息可以使用 this.showMessage() 调用，这个组件中又会用到 icon 组件，就可以通过上面的方式获取 icon 组件后，拼接到创建的 dom 元素中。

---

以上。