vue 利用component组件和is属性实现动态组件

我刚学了一种 vue 新的布局方式，通过config配置，利用component组件和is属性来控制页面里面展示内容，在这里简单做一个 dome

1，首先新建一些组件的vue页面

这个文件的目录，其中component中的是页面展示的组件

src
   assets  // 静态文件
   component  // 组件文件
        BaseInfo.vue
        OpenInfo.vue
        CommentReview.vue
        OrderInfo.vue
    config  // 配置文件
        index.js
    view  // 页面内容
        index.vue

这里展示一下 组件中的内容

2，config 文件中的配置

const open = function () {
   const vm = this
   return [
     {
     // type：‘’  可以通过type类型来判断展示那些组件内容
       modules: [
         {
           id: 'baseInfo',
           refName: 'baseInfo',
           component: () => import('@/component/open/BaseInfo')
         },
         {
           id: 'lineInfo',
           refName: 'lineInfo',
           component: () => import('@/component/open/OpenInfo')
         },
         {
           id: 'reviewInfo',
           refName: 'reviewInfo',
           component: () => import('@/component/open/CommentReview')
         },
         {
           id: 'orderInfo',
           refName: 'orderInfo',
           component: () => import('@/component/open/OrderInfo')
         }
       ]
     }
   ]
 }
 
 export const openModules = vm => {
   return open.call(vm)
 }

3，展示页面中的操作

页面展示：

image.png

注：这里配置可以用多个，给他配置里设置一个 type ，通过 type 类型，来控制展示的是那些界面。这里就不多介绍了