Vue3如何检查子组件类型

需求：

检查parent组件的子组件是否为children组件

<parent>
	<children></children>
</parent>

解决方法

拿到context.slots.default()，其中包含了parent组件下所有子组件的信息

然后遍历context.slots.default()，其中有type属性，通过type属性我们可以知道每一个子组件的类型，是div还是span还是children…

import children from 'xxx'

export default {
  name: 'parent',
  setup(props, context) {
    // 注意！这里是default()函数，而不是熟悉，需要加括号执行！！
    const defaults = context.slots.default()
    
    // 遍历defaults
    defaults.forEach((tag)=>{
      // 判断类型
      // 注意！！如果这里的children是你自定义属性的名字，记得在上面import
      if(tag.type !== children) {
        throw new Error('The child component of parent must be children')
      }
    })

    return {
      defaults
    }
  }
}