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
<template>
    <div class="warp">
        <div class="message" :class="item.type" v-for="(item,index) in notices" :key="item._name">
            <div class="title">{
  {item.title}}</div>
        </div>