vue工作开发总结（七）----手动挂载组件

在一些需求中，手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件，最理想的用法是通过

命令式调用，就像elementui 的this.$message 而不是在模板中通过状态切换，这种实现方式真是太糟糕了。对吧

 

来个简单的例子：

import Vue from 'vue'
improt Message from '/message.vue'

//1构造子类
let MessageConstructor  = Vue.extend(Message)
//实例化组件
let messageInstance = new MessageConstructor();
//$mount 可以传入选择器字符，表示挂载到改选择器
//如果不传入选择器，将渲染为文档之外的元素，可以想象成document.createElement()在内存中生成dom
messageInstance.$mount();
// messageInstance.$el获取的是dom元素
// document.body.appendChild(messageInstance.$el)

下面我们实现一个简单的message弹窗组件

Message/index.vue

//默认选项
const DefaultOptions = {
    duration:1500,
    type:"info",
    title:"提示信息"
}
let mid = 0;

export default{
    data(){
        return {
            nitices:[]
        }
    },
    methods:{
        add(notice = {}){
            //name 标识 用于移除弹框
            let _name = this.getName();
            notice = Object.assign({_name},DefaultOptions,notice);
            this.notices.push(notice);
            setTimeout(()=>{
                this.removeNotice(_name)
            },notice.duration)
        },
        getName(){
            return "msg_"+(mid++)
        },
        reomveNotice(_name){
            let index = this.notices.findIndex(item=>item._name===_name);
            this.notives.splice(index,1)
        }
    }
}


Message/indx.js
import Vue from 'vue'
import Index from './index.vue'

let messageInstance = null;
let MessageConstructor = Vue.extend(Index)

let init= ()=>{
       messageInstance = new MessageConstructor()
       messageInstance.$mount()
       document.body.appendChild(messageInstance.$el)
}

let caller = (options)=>{
    if(!messageInstance) init(options);
    messageInstance.add(options);
}

export default{
    //返回install函数，用于Vue.use注册
    install(vue){
        vue.prototype.$message = caller
    }
}

main.js
import Message from '@/compontents/Message/index.js';
Vue.use(Message);

使用：
this.$message({
    type:"success",
    content:"成功过了啊"，
    duration:3000
})

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