在开发大型项目中如果一个页面引入多个组件代码会非常臃肿,会让我们用许多v-if ref来控制页面显示比如下面这种情况,后期维护会很麻烦
这个时候就需要使用动态异步引入组件的方式
因为我的webpack版本较低所以采用require方式 而非import ,不然的话会报错
computed: {
loader() {
// this.recordType 是文件名
return () => resolve =>
require([`@/views/myApproval/components/${this.recordType}`],resolve)
},
},
在vue的计算属性中加入上方代码,每次触发该方法时引入的路径都会根据 this.recordType而改变
引入的文件名需要与 this.recordType 一致
// 在要执行的方法内加入该代码
// 将要引入的路径赋给 component 然后进行绑定
this.component = this.loader()
最后使用component 组件 :is中的component 就是引入的路径,一个ref就可以调用组件内的方法
上面那些 代码都可以删掉了不需要用多个 v-if来控制