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

最新推荐文章于 2023-07-27 18:13:28 发布

原创最新推荐文章于 2023-07-27 18:13:28 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用Vue.js创建一个单例广告组件，通过手动挂载实例实现应用内多个独立Vue实例共用同一广告组件，确保广告内容的统一性和高效性。

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节点。