vue 动态组件用法

最新推荐文章于 2023-08-08 18:06:35 发布

weixin_45108907

最新推荐文章于 2023-08-08 18:06:35 发布

阅读量386

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45108907/article/details/113308382

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了Vue中动态组件的使用以及getComponent方法的详细功能，包括如何获取事件源组件，当事件源非组件时返回null。同时，提供了component.js文件的相关内容，展示组件的实际应用。

摘要由CSDN通过智能技术生成

getComponent()使用

返回事件的始发bai者。

返回du：

发起事件的 Component 对象，如果zhi该对象不是一个 Component，则返回 null。

component文件

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

component.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()

组件使用

// 引入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>