得到组件渲染的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)
用途:
当使用服务的方式来使用组件时,比如 Message 弹窗消息可以使用 this.showMessage()
调用,这个组件中又会用到 icon 组件,就可以通过上面的方式获取 icon 组件后,拼接到创建的 dom 元素中。
以上。