类似弹窗等组件我们希望是全局单例的,下面是 Vue 中的几种实现方式。

Vue 实例

使用Vue.extend方法得到一个组件的实例,挂载之后插入到DOM中。

var MyComponent = Vue.extend({
  template: '<div v-on:click="world">Hello {{msg}}!</div>',
  props: {
    msg: {
      type: String,
      required: true
    }
  }
  methods : {
    world : function() {
      console.log('world')
    }
  }
})
 
var component = new MyComponent(propsData: {msg: 'world'}).$mount()
document.getElementById('app').appendChild(component.$el)

传入prop需要在 new 组件时传入一个名为propsData的对象。组件内的data可以直接以component.data['name']这种形式修改。

Vue实例组件生命周期还有$forceUpdate()$nextTick()$destroy()方法。
注意:$forceUpdate()不会影响所有子组件,只影响实例本身和插入插槽内容的子组件。

Vue 全局 mixin

Vue.mixin({
    mounted:function(){
        if(this.$root===this){
            var ne=document.createElement("div");
            ne.id="placeholderGLOBAL";
            this.$el.appendChild(ne);
            var dp=Vue.component("global-components");
            var idp=new dp({parent:this,el:"#placeholderGLOBAL"});
            idp.$mount();
        }
    }
});

https://forum.vuejs.org/t/solved-component-singleton-render-only-once-reuse-dom-elements/17799/9