Vue动态组件components的使用

        <div>
            <el-tabs
                v-model="activeName"
            >
                <el-tab-pane
                    v-for="item in tabList"
                    :key="item.name"
                    :label="item.label"
                    :name="item.name"
                />
            </el-tabs>
            <components :is="activeName" />
        </div>
 
 
        
<script>
import autoPricePanel from './AutoPricePanel';
import controlledPricePanel from './ControlledPricePanel';
import strongPricePanel from './StrongPricePanel';
 
const tabList = [
    {
        label: '自动跟价规则设置',
        name: 'autoPricePanel',
    },
    {
        label: '控价商品管理',
        name: 'controlledPricePanel',
    },
    {
        label: '强跟价商品管理',
        name: 'strongPricePanel',
    },
];
 
export default {
    components: {
        autoPricePanel,
        controlledPricePanel,
        strongPricePanel,
    },
    data() {
        return {
            tabList,
            activeName: 'autoPricePanel',
        };
    },
 
    computed: {},
    created() {},
    methods: {},
};
</script>
<style scoped>
</style>