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

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

 

<template>
  // 其他页面也一样，只有背景色与页面的展示名不同，这就不一一介绍了
  <div class="content">我是 OpenInfo 页面</div>
</template>
<script>

export default {
  name:'openInfo'
  data() {
    return {};
  }
};
</script>
<style scoped>
.content {
  display: flex;
  justify-content: space-between;
  width: 1000px;  
  height: 200px;
  background-color: green;
}
</style>

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，展示页面中的操作

 

<template>
  <div class="content">
    <div>我是 index</div>
    <div v-for="(content,index) in openListValue" :key="index">
    <!-- component标签创建动态组件，is属性指向谁，就显示哪个组件 -->
      <component  :key="content.index"
        :is="content.component"  
        :ref="content.refName"
        :refName="content.refName"
      ></component>
    </div>
  </div>
</template>
<script>
import { openModules } from "@/config/index";

export default {
  data() {
    return {
      openList: [],
      openListValue: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.openList = openModules(vm)[0];
      this.openListValue = this.openList.modules;
    }
  }
};
</script>
<style scoped>
.content {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  width: 1000px;
}
</style>

 

 

页面展示：

image.png

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

作者：jasmine_6aa1
链接：https://www.jianshu.com/p/14980d732e16
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。