vue 怎么拆分默认插槽中的数据？

首先理下需求，如上图，有一个按钮组，里面最多有N个按钮（按不同条件显示不同按钮），当显示的按钮超过3个时，只显示前3个，然后在左侧或者右侧显示一个更多按钮，点击后弹出剩下的按钮。

这里有如下两次使用方法。第一种使用方法我觉得太繁琐了。

1.我需要维护额外一个btnList变量，如果是一个任务列表，每条任务都有一个这种按钮组，那么我就需要在向后台请求到每一页任务的数据后，都要先循环任务数组，在每条任务的json中创建一个btnList变量，然后再渲染页面。
2.把按钮的样式封装进btns组件我感觉也不是很好，如果我想加功能，比如 改里面按钮的样式，或者在按钮上加一个badge小徽标 都不是很方便，需要在btnList数组里加新字段，然后改h-btns组件源码。
3.需要在子组件的@click事件中统一判断点击的是哪个按钮，这里感觉也不方便。

所以优先考虑第二种写法。

用法1
let btnList = [{text:'按钮1',class:'aaa'}{text:'按钮2',class:'bbb'},...];
<h-btns :btns='btnList' @click="在这里统一判断点击的是哪个按钮"></h-btns>

用法2
<h-btns>
    <h-btn v-if="true" class='' @click=''>按钮1</h-btn>
    <h-btn v-if="false" class='' @click=''><badge value="23">按钮2</badge></h-btn>
    <h-btn v-if="true" class='' @click=''>按钮3{{item.num}}</h-btn>
    <h-btn v-if="true" class='' @click=''>按钮4</h-btn>
    <h-btn v-if="false" class='' @click=''>按钮5</h-btn>
    <h-btn v-if="true" class='' @click=''>按钮6</h-btn>
    <h-btn v-if="true" class='' @click=''>按钮7</h-btn>
</h-btns>

然后第二种写法的核心问题就是怎么把插槽里面的按钮拆分成 默认显示的 和 更多弹框中 的两部分。这里没找到很好的方法，然后我想到了用css变相解决

源码
<div class="btns">
    <!--默认显示部分-->
    <slot name="default"></slot>
            
    <div class="btns_moreBox">
        <a href="javascript:;" class="btns_moreBtn">更多</a>
        <!--更多弹框-->
        <div class="btns_moreContent">
            <slot name="default"></slot>
        </div>
    </div>
            
</div>

编译后
<div class="btns">
    <!--默认显示部分-->
    <btn>按钮1</btn>
    <btn>按钮2</btn>
    <btn>按钮3</btn>
    <btn>按钮4</btn>
    <btn>按钮5</btn>
    <btn>按钮6</btn>
            
    <div class="btns_moreBox">
        <a href="javascript:;" class="btns_moreBtn">更多</a>
        <!--更多弹框-->
        <div class="btns_moreContent">
            <btn>按钮1</btn>
            <btn>按钮2</btn>
            <btn>按钮3</btn>
            <btn>按钮4</btn>
            <btn>按钮5</btn>
            <btn>按钮6</btn>
        </div>
    </div>
            
</div>

CSS核心部分
btn{flex:1;}
.btns_moreBox{none;}

btn:nth-child(3) ~ btn{display:none;}    //外部只显示前3个按钮
btn:nth-child(4) ~ .btns_moreBox{display:block;}    //超过3个显示更多按钮
.btns_moreContent btn{display:none;}
.btns_moreContent btn:nth-child(3) ~ btn{display:block;}    //更多弹层中只显示第3个以后的按钮