站长资源网络编程

<table>
 <blog-post-row></blog-post-row>
</table>

<table>
 <tr is="blog-post-row"></tr>
</table>

<!-- 失活的组件将会被缓存！-->
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

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>

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)
 }

<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>