vue 组件实例创建

方法一：

import Vue from "vue";
// 创建函数接收要创建组件定义
function create ( Component, props ) {
    // 创建一个Vue新实例 
    const vm = new Vue( {
            render ( h ) {
                // render函数将传入组件配置对象转换为虚拟
                dom console.log( h( Component, {
                    props
                } ) );
                return h( Component, {
                    props
                } );
            }
        } )
        .$mount();
    //执行挂载函数，但未指定挂载目标，表示只执行初始化工作 
    // 将生成dom元素追加至
    body document.body.appendChild( vm.$el );
    // 给组件实例添加销毁方法 
    const comp = vm.$children[ 0 ];
    comp.remove = () => {
        document.body.removeChild( vm.$el );
        vm.$destroy();
    };
    return comp;
}
// 暴露调用接口
export default create;

方法二：

import Vue from "vue";
const Ctor = Vue.extend( Component )
const comp = new Ctor( {
    propsData: props
} )
comp.$mount();
document.body.appendChild( comp.$el )
comp.remove = () => {
    // 移除dom document.body.removeChild(comp.$el)
    // 销毁组件 
    comp.$destroy();
}

 插件封装

import Notice from '@/components/Notice.vue'
//... 
export default {
    install ( Vue ) {
        Vue.prototype.$notice = function ( options ) {
            return create( Notice, options )
        }
    }
}