在寫vue項目的時候啊，我們有了初始化的根實例之后，頁面之間都是通過router進行管理，組件也是通過import進行局部注冊，但是如果我要是想從接口動態(tài)渲染組件怎么辦？想實現(xiàn)一個類似于 window.alert() 提示組件就像是調(diào)用 JS 函數(shù)一樣調(diào)用它？

提前寫好？

哪有那么多提前，有這個力氣還不如想一想今晚去哪干飯？

回到正題哈

首先：

我先提前準備好一個干凈的vue2.x的項目，然后我寫好一個組件，叫什么名字好呢？就叫Toast，妥妥的輕提示

<template>
    <div class="box" v-if="isShow">
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
export default {
    name:'Toast'
}
</script>
<style lang="">
    
</style>

看到這里那就可能有些鐵子問，為什么要放一個v-if上去？還有哪個msg是什么東西，還有哪個類名什么什么的，我們先把這些問題放一下，后面會解答

既然想要調(diào)用JS函數(shù)一樣愉快使用，那我們就這么愉快的決定了。

然后：

我在我的utils.js文件中寫下面的代碼

import vue from 'vue'
import Toast from '../views/Toast.vue'


// 生成構(gòu)造函數(shù)
const ToastConstructor = vue.extend(Toast)

function showToast(txt, onTime = 2000) {
    let newDom = new ToastConstructor({
        el: document.createElement('div'),
        data() {
            return {
                msg: txt,
                isShow: true
            }
        }
    });
    document.body.appendChild(newDom.$el)
    setTimeout(() => { newDom.isShow = false }, onTime)
}
//全局組件，掛載到vue原型上
function regFn() {
    vue.prototype.$toast = showToast
}

export default regFn

首先我們引入vue和Toast組件，畢竟我們需要用到vue的extend，肯定帶它一起玩，不帶它鬧脾。

然后我用Vue.extend生成一個構(gòu)造函數(shù)--->「const ToastConstructor = vue.extend(Toast)」

然后再進行二次封裝，搞一個**「showToast函數(shù)」，傳入兩個參數(shù)，一個是「內(nèi)容txt」，一個是「時間onTime」，輕提示嗎，肯定一下子又消失了，那個內(nèi)容就是模板「msg」**里要傳入的內(nèi)容，

后來:

我們new一個**「newDom，」** 它接收的是一個對象，就是把下面的東西裝起來，然后el是創(chuàng)生成一個**「dom」**

然后下面data返回**「msg」就是模板哪里的那個東西知道了吧，然后將傳進來的「txt」給他安上，那個isShow也是就是模板上面的「v-if」**的，因為要創(chuàng)建一個元素，肯定這個好使，現(xiàn)在差不多完成啦，鐵子們再堅持一下

然后我們再進行掛載，怎么掛載呢？用**「document.body.appendChild(newDom.$el)」**

為什么呢？

「document.body.appendChild()」 是將指定的**「ewDom」**的 **「$el」加到「document.body」**的末尾

然后我們輕提示完了是不是要消失，所以就用**「setTimeout(() => { newDom.isShow = false }, onTime)」** 將它兩秒后消失，

然后就到了掛載到Vue原型上了，然后就是導(dǎo)出啦，不導(dǎo)出別人不知道你搞了什么出來。

再且：

在main入口文件引入這個utils.js，然后全局使用

//引入
import ToastDom from './util/utils'
// 全局注冊使用
Vue.use(ToastDom)

然后在隨便一個頁面使用，我這里是在App.vue中

<template>
  <div id="app">
    <button @click="addDom">動態(tài)添加組件</button>
  </div>
</template>

<script>
export default {

  methods: {
    addDom(){
      this.$toast('你瞧瞧我做的輕提示')
    }
  },
};
</script>

<style lang="less">

</style>

這里我用一個按鈕然后配合一個點擊事件，讓他使用這個 「$toast，」 并傳入一個字端，至此，大功告成?？纯葱Ч?/p>