vue项目中使用elementUI的tab组件切换时动态加载自定义组件

<template>
    <div class="home-tabs">
        <el-tabs v-model="ActiveName" @tab-click="handleTabsChange">
            <el-tab-pane
                v-for="(item,index) in DataList"
                :key="index"
                :label="item.label"
                :name="item.name"
            >
                <component :is='item.content'></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import windows from '../windows'
import mac from '../mac'
import history from '../history'
import download from '../download'
import setting from '../setting'
export default { 
  name: 'homeTabs',
  data () { 
    return { 
      activeName："windows",
      DataList: [{ 
        label: 'windows打包',
        name: 'windows',
        content: windows
      }, { 
        label: 'mac打包',
        name: 'mac',
        content: mac
      }, { 
        label: '打包记录',
        name: 'history',
        content: history
      }, { 
        label: '下载',
        name: 'download',
        content: download
      }, { 
        label: '程序配置',
        name: 'setting',
        content: setting
      }]
    }
  },
  components: { 
    windows,
    mac,
    history,
    download,
    setting
  },
  methods: { 
    handleTabsChange (tab) { 
      this.$store.commit('handleTabsChange', tab.name)
    }
  }
}
</script>
<style lang="less" scoped>
</style>

重点知识

<component :is='item.content'></component>
// 动态组件:component,动态组件会根据is里面的数据变化，自动的加载不同的组件

参考地址

1. 参考地址1

原文链接：https://blog.csdn.net/weixin_39893889/article/details/103805353

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。