vue封装组件的正确方式-封装类似elementui的组件

最近读了下element的源码，仿照他封装了两种不同的组件。

第一种：通过组件来调用显示的

组件说明：只是一个简单的组件 显示一个标题和一段自定义slot内容（仅用作展示）；我想通过以下方式引入

import TestModel from "./testComponent/index";
Vue.use(TestModel);

并且调用方法为：

        

          2222
        
    

这么做，像不像element？是有点这个意思对吧，但是怎么实现呢，在这先说明下use的作用，其实就是相当于执行他的install方法，明白这个 之后 开始动工，思路：执行他的install方法，声明一个vue组件，组件内容就是上面写的，从而达到全局组件的目的，来看看我的js怎么写的：

import main from "./main";
main.install = (Vue) => {
    Vue.component("test-conponent",main);
}
export default main;

没错就是这么一句，第一种的简单组件就写完了，一次引入 全局通用。

第二种、通过指令调用，比如element的loading组件等

以上是loading组件的内容，要通过这种方式引入：

import loading from "./toolTip";
Vue.use(loading);

并且通过指令方式调用

this.$loading.show({
        text:"拼命加载中"
      });

有的朋友可能会说了，这怎么可能啊，没有节点怎么放进去？对 没错 确实，没有节点是没办法进去的，但是没有节点就声明节点 对么？

import LoadingComponent from "./loading";
import Vue from "vue";
let instance;
const loadingConstructor = Vue.extend(LoadingComponent); 
instance = new loadingConstructor({
    el:document.createElement("div")
});
instance.show = false;
const loading = {
    show(options = {}){
        instance.show = true;
        document.body.appendChild(instance.$el);
        instance.text = options.text;
        setTimeout(()=>{
            loading.hide();
        },5000)
    },
    hide() {
        instance.show = false;
    }
}
export default {
    install(){
        if(!Vue.loading){
            Vue.$loading = loading;
        }
        Vue.mixin({
            created(){
                this.$loading = Vue.$loading;
            }
        })
    }
}

实际上就是变相的利用install方法 吧loading指令挂到页面中，这样不管在哪里都可以直接用this.$loading调用。

以上就是本文所有分享

转载于:https://www.cnblogs.com/jinzhenzong/p/9894634.html