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
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。