需求

实现以 API 的形式调用自定义组件，可以在vue实例上下文中调用，也可以在普通js文件中调用。

需求分析

以上的需求到底有何应用场景
1：全局弹框
有时候我们需要要非vue的上下文环境中调出全局弹框，例如在异步接口调用的时候，有一些全局错误码需要统一处理，这里如果要分散到接口调用的位置去处理显然会有很多重复代码。我们需要在接口文件中对错误码错中相应处理，如下所示：

 api().then((response) => {
    if(response.code === 'error'){
       //弹出错误提示框 
       toast("服务端错误")
    } 
 },(response)=>{
     //弹出错误提示框 
      toast("网络错误")
 })

可以看出以上弹出错误提示框的位置最好是通过api的形式调用 并且 其不再vue的上下文环境中。

需求有了，那么该种形式的组件该如何实现呢？

实现原理

这里我们有一个普通的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() {
        
    }
    ......
}

我们可以借助该对象来得到创建组件额构造函数

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给我们提供了灵活的使用方式，我们平时的开发可能只局限于.vue文件的封装以及实现，但这并不代表vue的全部，我们要乐于尝试自己没有使用过的方式，进而对vue有更深入的理解。