vue中，component动态组件的实际应用（一）

vue中，component动态组件的实际应用（一）

1、路由页面

src\router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Subgroup from '@/views/subgroup'  //实例页面
Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'Subgroup',  
    component: Subgroup
}]

const router = new VueRouter({
  routes
})
export default router

2、实例页面

src\views\subgroup\index.vue

  <!-- 实例页面 -->
<template>
  <div>
    <el-page-header v-if="headerShow" title="" @back="saveData" :content="rightTitle" class="edit-back"></el-page-header>
   <el-button type="primary" @click="open('RW_LINK')">主要按钮</el-button>
     <!-- 动态组件 -->
   <component class="rightContent" :is="rightPanel" :layerName="rightPanelKey" :ref="ref" :key='rightTitle'></component>
  </div>
</template>
<script>
import rightUtilityList from "./rightUtilityList.js";
export default {
  components: {
  },
  data () {
    return {
      rightPanel: '',
      rightTitle: '',
      rightPanelKey: '',
      ref: '',
      headerShow:false
    }
  },
  methods: {
    saveData(){},
    /**
     * layerName 当前选中的图层
     */
    open(layerName) {
      this.headerShow = true

      // 获取组件信息
      console.log('rightUtilityList',rightUtilityList);
      const component = rightUtilityList.getComponentByKey('RD_LINK');
      // const component = rightUtilityList.getComponentByKey('RD_LINK_ACCESSLIMIT');
      console.log('组件信息',component);
      this.rightPanel = component.components;
      this.rightTitle = component.title;
      this.ref = component.ref;
    },
  }
}
</script>
<style lang="less" scoped></style>

实例页面