需求

当我们的页面需要不定量的组件进行渲染时,我们可能会大量引入全部组件再使用动态组件完成需求,通过组件的动态引入减少代码量以及项目难度,我们需要掌握以下内容

动态组件

通过<component>标签上的is属性实现对组件的动态引用

<template><component :is="myComponent"></component>
</template>

is属性的属性值可以为:

• 一个已注册过的组件的组件名
• 一个组件的选项对象

  <template><component :is="myComponent"></component>
  </template>
  

  export default {data(){return {myComponent:{render(h){return h('h1','这是我的组件')}}}}
  }
  

异步组件

Vue允许以一个函数的方式定义组件,这个函数会在组件需要被渲染的时候触发,并将结果缓存起来以便以后重新渲染

Vue.component('MyComponent',function(resolve){// 通过resolve回调传递一个组件对象resolve({render(h){return h('h1','这是我的异步组件')}})
})

或者返回一个Promise

// 上面用全局引入的方式,这里使用局部引入的方式
export default {components:{MyComponent:function(){return new Promise(resolve=>{resolve({render:h=>h('h1','这是我的异步组件')})})}}
}

import函数

再ECMAScript2020中引入import函数支持动态加载模块,参数与import命令接受的参数相同,它返回一个Promise对象

export default {methods:{handleImport(){import('./a.vue').then(data=>{console.log(data) // {default:Vue对象}})}}
}

所以我们常用的异步组件写法

export default {components:{MyComponent:()=>import('./my-component.vue')}
}

import函数允许动态路径,但注意不能是纯动态的

例如import(foo)，这样完全动态的加载方式将会失败，因为webpack需要一些文件位置信息。因为变量foo可能是系统或项目中任何文件的路径。import()必须至少包含关于模块所在位置的一些信息，因此让捆绑可以局限于特定的目录或文件夹。

内容参考自vue动态组件找不到module问题,import不能接收动态参数

所以我们可以使用以下方式进行动态引入

let fileName="user"
import('@/components/'+fileName+'.vue')

动态组件和异步组件结合实现功能

<template><component v-if="dynamicComponent" :is="dynamicComponent"></component>
</template>

export default {computed:{dynamicComponent(){// 这里通过路由参数判断引入文件let filename=this.$route.params.filenameif(filename){return ()=>import('@/components/dynamic-components/'+filename+'.vue')}else{return null}}}
}

拓展1-处理加载状态

异步组件函数也可以返回一个对象

export default {components:{MyComponent:()=>({// 需要加载的组件 (应该是一个 `Promise` 对象)component: import('./MyComponent.vue'),// 异步组件加载时使用的组件(同步组件)loading: LoadingComponent,// 加载失败时使用的组件(同步组件)error: ErrorComponent,// 展示加载时组件的延时时间。默认值是 200 (毫秒),即200毫秒后开始显示加载中组件delay: 200,// 如果提供了超时时间且组件加载也超时了，// 则使用加载失败时使用的组件。默认值是：`Infinity`timeout: 3000})}
}

拓展2-require方法

webpack支持require方法

AMD-require方法

require((paths:Array\<String\>[,callback:Function]))方法链接

paths:引入的文件列表

callback:回调函数

我们也可以结合resolve回调实现异步组件

Vue.component('MyComponent',resolve=>{require(['@/components/my-component.vue'],resolve)
})

webpack-require.context方法

require.context(directory:String[,includeSubdirs:Boolean][,filter:RegExp][,mode:String])方法链接

directory:组件目录的相对路径

includeSubdirs:是否查询子目录

filter:组件名匹配的正则表达式

mode:可用模式,默认值’sync’

通过require.context方法检查组件是否存在

var context=require.context('@/components',false,/\.vue$/)
var keys=context.keys()// ['./user.vue','./game.vue','./city.vue']
var moduleName=keys.find(key=>key.replace(/(^\.\/)|(\.vue$)/g,'')==this.$route.params.module)
var myComponent=moduleName?context(moduleName).default:null