vue全局组件的懒加载

vue项目中注册的全局组件，在页面初始化的后，需要把全局的组件全部注册完毕，这就造成在全局组件较多的情况下，页面初次渲染的时候加载缓慢。

为优化这种在页面初始化的时候加载全局组件缓慢的问题，可以使用全局组件的懒加载，暂且称为组件懒加载。 

实现方法：全局的组件页面，在初始化的时候，不进行注册，在调用的时候进行判断、注册、加载。

在项目的入口文件main.js中配置：

// 需要注册的全局组件
import componentsArray from './components/global/index'
import register from './components/register/index'
Vue.use(register,componentsArray)

componentsArray为全局的所有的需要注册组件。
register为注册组件的方法。

./components/global/index的代码

import global01 from './global01'
import global02 from './global02'
import global03 from './global03'

var componentsArray={
    global01,
    global02,
    global03
}

export default componentsArray

./components/register/index的代码

// 自定义组件
import registerComponents from './register'
// 存放已经注册的组件
var allcomponents={}

var install=function (Vue,componentsArray){
    // 注册自定义组件
    Vue.component('register',registerComponents)
    // 指令
    Vue.directive("register",{
        inserted: function (el, binding){
            // 判断组件是否已经注册
            if(!allcomponents[binding.value]){
                if(componentsArray[binding.value]){
                    Vue.component(binding.value,componentsArray[binding.value])
                    allcomponents[binding.value]=true
                }
            }
        }
    })
}

export default install

注册的自定义组件，是为了在自定义组件内进行通过自定义指令的方式进行动态注册全局组件。
在register组件内通过自定义指令判断需要注册的组件是否已经注册过。

./register组件代码

<template>
    <div class="register" v-register="$attrs.register">
        <component v-if="flage" :is="$attrs.register" v-bind="$attrs" v-on="$listeners">
            <template v-for="(value,name) in $scopedSlots" v-slot:[name]="data">
                <slot :name="name" v-bind="data"></slot>
            </template>
        </component>
    </div>
</template>

<script>
    export default {
        name: "register",
        data(){
            return {
                flage:false
            }
        },
        mounted() {
            this.flage=true
        }
    };
</script>

v-register="$attrs.register"通过调用该组件的父组件传过来的组件名称。
如果全局组件中有插槽的使用，这里进行了插槽的传递。

整个方法中只有数据、方法、插槽的数据传递。

使用：

父组件代码：

<template>
    <div class="test">
        <register :register="register" :userName="'张三'" @fn="getName">
            <template v-slot:header="v">
                {{v}}
            </template>
            <template v-slot:body="v">
                {{v}}
            </template>
            <template v-slot:footer="v">
                {{v}}
            </template>
        </register>
    </div>
</template>

<script>
    export default {
        name: "test",
        data(){
            return {
                register:"global01"
            }
        },
        methods:{
            fn:function (p){
                console.log('this is fn',p);
            }
        }
    };
</script>

子组件:

<template>
    <div class="global01">
        <slot name="header" v-bind:user="user"></slot>
        <slot name="body" v-bind:container="container"></slot>
        <slot name="footer" v-bind:msg="msg"></slot>
    </div>
</template>

<script>
    export default {
        name: "global01",
        props:['userName'],
        data(){
            return {
                user:"张三",
                container:"这里是主体",
                msg:"这里是底部",
            }
        },
        mounted() {
            console.log(this.userName);
            this.$emit("fn",{})
        }
    };
</script>

总结：
整体的流程是在自定义组件register中，通过接受需要注册的组件名称$attrs.register，然后使用自定义指令v-register的方式进行动态注册。
整个方法中的父子数据交互只有数据、方法、插槽；这里仅提供一种可实现全局组件懒注册的方法。