[JavaScript知识库]Vue动态引入组件

需求

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

动态组件

通过<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.filename
			if(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