Vue3 造轮子做 Tabs 组件时，展示子组件内容/检查子组件类型的问题

• 我现在需要确认 TabsDemo.vue 中引用的 Tabs 组件里的两个子组件的类型

• 附 Tab 组件代码

• 怎么检查类型？当然是到 Tabs 组件里检查

先展示内容看看

• 我们可以在 Tabs 组件用以下代码获取外面传给我们的子内容

const defaults = context.slots.default()
复制代码

• 如何展示内容呢？
• 用以下代码即可在页面中展示获取的内容

<component :is="defaults[0]"/>
<component :is="defaults[1]"/>
复制代码

• 展示内容如下

如何检查子组件类型

• 用defaults[下标].type === 组件名即可
• 先 import 引入需要判断的组件，然后再判断

• 上图代码结果如下

能判断子组件类型后，现在就可以检查子组件类型了

• 代码如下：

<script lang="ts">
import Tab from './Tab.vue'
export default {
  setup(props,context){
    const defaults = context.slots.default()
    // 每一个都是 tag（标签），判断标签类型
    defaults.forEach((tag)=>{
    // 标签类型不是 Tab，就报错
      if(tag.type !== Tab){
        throw new Error('Tabs子标签必须是Tab')
      }
    })
    return {defaults}
  }
}
</script>
复制代码

• 报错了，因为第一个标签是<div>

• 同时，因为上面报错了，下面的 return 代码就不会执行，会说 defaults 为 undefined

• 这样做有一个好处，如果开发者代码错了，就直接不运行了。

总结

• 获取插槽内容const defaults = context.slots.default()
• 判断子组件的类型defaults[下标].type === 组件名
• 向我们展示了一个 Vue 的原理：每一个组件，例如Tab.vue，最终会导出一个对象，因为判断子组件类型代码显示defaults[下标].type与Tab是全等的，打印出前者是一个对象。