Uso de componentes dinámicos de Vue

getComponent () utiliza

Devuelve el creador del evento.

Regreso du:

El objeto Componente que inició el evento. Si el objeto no es un Componente, se devuelve un valor nulo.

archivo de componente

//component文件下建立对应的组件
export default{
    
    
  name: 'test',
  itemName: '测试1',
  sort: 1,
}

componente.js

class ComponentList {
    
    
  constructor () {
    
    
    //  读取./component下的vue 组件
    const viewFile = require.context('./component', true, /\.vue$/)
    const viewList = viewFile.keys().reduce(function (prev, cur) {
    
    
      return prev.concat(viewFile(cur).default || [])
    }, [])

    this.navList = viewList.map(item => {
    
    
      const obj = {
    
    
        name: item.itemName,
        sort: item.sort,
        page: item
      }
      return obj
    })
  }

  // 排序
  sortByKey (array, key) {
    
    
    return array.sort(function (a, b) {
    
    
      var y = a[key]
      var x = b[key]
      return ((x > y) ? -1 : ((x < y) ? 1 : 0))
    })
  }

  getComponent () {
    
    
    const arr = this.sortByKey(this.navList, 'sort')

    return arr
  }
}

export default new ComponentList()

Uso de componentes

// 引入component.js文件
import ComponentList from './component.js'
//引入
 data () {
    
    
    return {
    
    
      currentView: null,
      navList: ComponentList.getComponent(),
    }
  },
created () {
    
    
    console.log(ComponentList.getComponent(),'c--');
    this.currentView = this.navList[0].page;
   
  },
 methods: {
    
    
    changeView (page) {
    
    
      this.currentView = page;
    }
  }

//  html部分
 <div class="panel padding-10">
      <div class="panel-title">测试数据</div>
      <div class="btn-group">
        <button
          class="btn"
          :class="{'active': currentView === nav.page}"
          v-for="(nav, index) in navList"
          :key="index"
          @click="changeView(nav.page)"
          v-html='nav.name'
        ></button>
      </div>
    </div>
    //出口
    //<!-- 动态组件展示内容 -->
    <keep-alive>
      <component :is="currentView"></component>
     </keep-alive>