Vue動態創建組件實例並掛載到body

方法一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue'
 
/**
 * @param Component 組件實例的選項對象
 * @param props 組件實例中的prop
 */
export function create(Component, props) {
 const comp = new (Vue.extend(Component))({ propsData: props }).$mount()
  
 document.body.appendChild(comp.$el)
 
 comp.remove = () => {
  document.body.removeChild(comp.$el)
 
  comp.$destroy()
 }
 
 return comp
}

 

方式二

import Vue from 'vue'
 
export function create(Component, props) {
 // 借雞生蛋new Vue({render() {}}),在render中把Component作為根組件
 const vm = new Vue({
  // h是createElement函數，它可以返回虛擬dom
  render(h) {
   console.log(h(Component,{ props }));
    
   // 將Component作為根組件渲染出來
   // h(標簽名稱或組件配置對象，傳遞屬性、事件等，孩子元素)
   return h(Component, { props })
  }
 }).$mount() // 掛載是為了把虛擬dom變成真實dom
 // 不掛載就沒有真實dom
 // 手動追加至body
 // 掛載之后$el可以訪問到真實dom
 document.body.appendChild(vm.$el)
 
 console.log(vm.$children);
  
 // 實例
 const comp = vm.$children[0]
 
 // 淘汰機制
 comp.remove = () => {
  // 刪除dom
  document.body.removeChild(vm.$el)
 
  // 銷毀組件
  vm.$destroy()
 }
 
 // 返回Component組件實例
 return comp
}