Vue 产生一个Vue 子类，然后挂载在任意的dom节点上

最新推荐文章于 2024-04-17 11:52:00 发布

flashbuffer

最新推荐文章于 2024-04-17 11:52:00 发布

阅读量1.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/flashbuffer/article/details/103293556

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

import adCom from "../components/ad/adCom.vue"

class AD4SigleInsClass { //为了单例创建的该类
    constructor(Vue) {
        this.adComClass = Vue.extend(adCom)
        this.addComIns = undefined
    }
    //getInstance
    init() {
        if (this.addComIns) {
            return this.addComIns
        } else {
            this.addComIns = new this.adComClass()
            return this.addComIns
        }
    }

}

export default {
    install: function (Vue) {
        const ad4SingleIns = new AD4SigleInsClass(Vue)
        let adIns = ad4SingleIns.init()
        adIns.$mount()
        document.body.appendChild(adIns.$el)
        Vue.prototype.$changeAD =(contentStr) =>{
            adIns.content = contentStr
        } 
    }
}

https://cn.vuejs.org/v2/api/#vm-mount

手动挂载vue实例，达到一个应用有多个vue实例，注意挂载的dom节点互相独立就行。

document.body.appendChild(adIns.$el）是全新的dom节点。