Vue如何动态设置tabs组件带参数的template插槽名？

解决方案 #

你当前的写法中#tab(activeTab)的activeTab会被Vue识别为静态字符串片段，不会作为响应式变量解析，因此只有写死常量时能匹配到对应插槽。

Vue 2.6及以上版本支持动态插槽名语法，你需要按以下方式修改：

1. 用#[ ]动态插槽语法包裹插槽名表达式
2. 用模板字符串拼接固定插槽名前缀和动态变量

修改后的模板代码示例： #

<tabs :items="tabs" v-model="tab" with-content @switch="switchTab">
  <!-- 加v-if避免activeTab初始为null时生成非法插槽名 -->
  <template v-if="activeTab !== null" #[`tab(${activeTab})`]>
    <div class="list" v-if="loaded">
      ...
    </div>
  </template>
</tabs>

补充说明 #

• 外层#[ ]是v-slot:的动态简写语法，方括号内的内容会被当作JavaScript表达式执行
• 当activeTab值为1时，上述表达式最终会解析为#tab(1)，和你写死的生效写法完全等价
• 若你的项目使用的是Vue 2.6以下的旧版本，需要升级Vue版本，或者改用render函数手写渲染逻辑实现动态插槽匹配

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