// 加載組件
let noticeCom = vm.$create({
    title: '提醒標題', 
    content: '提醒內(nèi)容',
    duration: 2000 // 組件的顯示時長
}).show()
// 銷毀
noticeCom.remove()

<!--Notice.vue組件-->
<template>
  <div v-if="isShow" class="notices">
     <div>{{title}}</div><div>{{contents}}</div>
  </div>
</template>
<script>
export default {
    props: {title: String, contents: String, duration: Number},
    data() {return {isShow: false}},
    methods: {
        show() { // show 方法控制組件的顯示
            this.isShow = true
            let timer = setTimeout(() => {
                this.isShow = false
                clearTimeout(timer)
            }, this.duration)
        }
    }
}
</script>

// main.js 把notice組件渲染掛載到vue實例上
import notice from "@/components/notice.js"
Vue.prototype.$create = notice

// notice.js 加載組件的主文件
import Vue from 'vue'
export default function create(component, props) {
    let vm = new Vue({
        // 使用render函數(shù)渲染組件
        render(h) {
            return h(component,{props})
        }
    }).$mount()
    document.body.appendChild(vm.$el) // vm.$el 是Notice組件掛載的根節(jié)點<div class="notices">··· ···</div>
    const noticeComponent = vm.$children[0]
    // 組件掛載銷毀實例的方法（實際就是刪除dom）
    noticeComponent.removeNotice = function () {
        document.body.remove(vm.$el)
    }
    return noticeComponent
}