替换sw-tabs为mt-tabs后标签内容无法显示，求排查解决思路

问题描述 #

使用mt-tabs组件时，标签栏（标签1、2）能正常显示，但标签内容始终不可见。尝试将<template #content>改为<template #default>后仍未解决。

用户代码如下：

<mt-tabs
    @new-item-active="setActiveItem"
    :items="[
        {
            label: '1',
            name: 'tab1'
        },
        {
            label: '2',
            name: 'tab2'
        }
    ]"
>
    <template #content>
        <p>Tab Content Loaded!</p>
    </template>
</mt-tabs>

解决方法 #

mt-tabs组件的核心逻辑是为每个标签页绑定对应名称的具名插槽，而非使用统一的content或default插槽。你需要按以下方式修改：

• 针对每个标签的name属性，创建格式为#tab-[标签name]的具名插槽
• 比如对应tab1和tab2，分别创建#tab-tab1和#tab-tab2插槽

修改后的代码示例：

<mt-tabs
    @new-item-active="setActiveItem"
    :items="[
        {
            label: '1',
            name: 'tab1'
        },
        {
            label: '2',
            name: 'tab2'
        }
    ]"
>
    <template #tab-tab1>
        <p>Tab 1 Content Loaded!</p>
    </template>
    <template #tab-tab2>
        <p>Tab 2 Content Loaded!</p>
    </template>
</mt-tabs>

这种写法是mt-tabs类组件的通用实现逻辑，切换标签时会自动匹配对应名称的插槽渲染内容，修改后即可正常显示标签页内容。

内容的提问来源于stack exchange，提问作者sh0pware_n00b