Vue js組件中引入Vue組件

用Vue一年多但是對Vue一些原理了解還是不夠，研究這個問題花了一天，記錄一下。

需求

需求：要實現地圖上彈窗，彈窗內嵌入Vue組件，組件調用視頻播放插件。
難點：要改造封裝好的彈窗js組件，引入Vue組件，之前調用組件都是直接在.vue文件里import進來，寫進components里就OK，可是放到js文件里還是第一次遇到。搜索了半天終於受到啟發，可以用 Vue.component ，可是找到以后還是研究了半天寫法才成功引入。

關鍵代碼

在前面引入Vue組件

import videoPreview from "@/view/videoPreview"

創建組件實例

    constructor(map, {}) {
        this.component = Vue.component('video-preview', videoPreview)
        this.createComponent(this.instance)
    }

    createComponent(){ //創建組件實例但暫不掛載
        const component = Vue.component('video-preview')
        const instance = this.instance = new component()
        instance._props.videoData = {} //這里相當於平時 <videoPreview :videoData="videoData"></videoPreview> 寫法里傳值videoData
    }

創建html

        this.parent = document.createElement('div')
        this.parent.innerHTML = `
          <div class="pop-container">

          </div>`
        this.container = this.parent.querySelector('.pop-container')
        this.container.innerHTML = `
          <div class="videoWindow">
            <div id="video-preview"></div>
          </div>`

需要用到彈窗和組件的時候再掛載（如果需要反復調用，僅需掛載一次，否則會重復創建（需要顯示視頻播放插件時問題尤其明顯））

this.instance.$mount("#video-preview")

調用組件內方法（假設組件內有方法 showPlugin()）

this.instance.showPlugin()

參考

• Vue 動態創建 component