需求

實現以 API 的形式調用自定義組件，可以在vue實例上下文中調用，也可以在普通js文件中調用。

需求分析

以上的需求到底有何應用場景
1：全局彈框
有時候我們需要要非vue的上下文環(huán)境中調出全局彈框，例如在異步接口調用的時候，有一些全局錯誤碼需要統一處理，這里如果要分散到接口調用的位置去處理顯然會有很多重復代碼。我們需要在接口文件中對錯誤碼錯中相應處理，如下所示：

 api().then((response) => {
    if(response.code === 'error'){
       //彈出錯誤提示框 
       toast("服務端錯誤")
    } 
 },(response)=>{
     //彈出錯誤提示框 
      toast("網絡錯誤")
 })

可以看出以上彈出錯誤提示框的位置最好是通過api的形式調用 并且 其不再vue的上下文環(huán)境中。

需求有了，那么該種形式的組件該如何實現呢？

實現原理

這里我們有一個普通的vue組價toast

/****toast.vue****/
<template> 
<div>this is toast</div>   
</template>
<script>
    export default {
        props: {
              
        },
        data () {
            return {
              
            }
        },
        created () {

        },
        mounted () {
          console.log("toast mounted")
        },
        beforeDestroy () {
          console.log("toast destroyed")
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    
</style>

當我們使用

toast from './toast'

時得到了一個對象:

{
    data: function(){
        return {
            
        }
    },
    props:{
        
    },
    render: function() {
        
    }
    ......
}

我們可以借助該對象來得到創(chuàng)建組件額構造函數

const ToastConstructor = Vue.extend(toast);

通過

var instance = new ToastConstructor({
        el: document.createElement('div') 
    });

得到組件實例。目前組件還沒能在頁面上渲染，我們通過

document.body.appendChild(instance.$el);//這里就是向body元素添加了子元素，而不依賴于某vue父組件。

使其渲染到頁面上。

另外我們可以改造一下.vue組件

/****toast.vue****/
<template> 
<div v-if="visible">this is toast</div>   
</template>
<script>
    export default {
        props: {
              
        },
        data () {
            return {
              visible: false
            }
        },
        created () {

        },
        mounted () {
          console.log("toast mounted")
        },
        beforeDestroy () {
          console.log("toast destroyed")
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    
</style>

通過visible控制彈出層組件的渲染與銷毀:

instance.visible = false //會將DOM元素刪除

封裝

在toast.js文件中對以上過程做進一步封裝即可實現以api形式調用的vue組件。

總結

vue給我們提供了靈活的使用方式，我們平時的開發(fā)可能只局限于.vue文件的封裝以及實現，但這并不代表vue的全部，我們要樂于嘗試自己沒有使用過的方式，進而對vue有更深入的理解。