假设我们定义了组件Tabs和Tab，现在在Demo中使用这两个组件，如下：
<template>
<div>
<Radios :selected="x">
<Radio label="1">选项1</Radio>
<Radio label="2">选项2</Radio>
<Radio label="3">选项3</Radio>
</Radios>
</div>
</template>
如何在Radios组件中获取到Radio的数据？
Vue3通过context可以获取到，那么具体是context的哪个属性可以获取，接下来使用log的办法逐步测试
1. 使用setup函数，参数1是props，参数2是context，使用展开语法在控制台log context
// Radios组件
<script lang="ts">
import Radio from './Radio.vue'
export default {
setup(props, context) {
console.log({...context})
}
};
</script>
log结果：
分析： emit一般用于向父组件发送事件，attrs和slots有可能包含我们想要的内容，继续log
2. 分别log attrs和slots
setup(props, context) {
console.log({...context.attrs})
console.log({...context.slots})
}
log结果：
分析： attrs是空对象，slots有个default函数，继续log
3. log default
setup(props, context) {
console.log({...context.slots.default()})
}
log结果：
分析：包含有三个对象，刚好Radios中包含有三个Radio，type好像就是它的类型，任取一个和Radio组件对比
4. 对比type和Radio组件
<script lang="ts">
import Radio from './Radio.vue';
export default {
props: ['selected'],
setup(props, context) {
const defaults = context.slots.default();
console.log(defaults[0].type == Radio);
console.log(defaults[0].type);
console.log(Radio);
}
};
</script>
log结果：
总结： 我们可以看到，结果为true，并且分别log后，发现他们的内容也相同。这样，我们就通过log测试法，层层递进，获取到了子组件。并且，我们发现vue中的每个组件其实就是个对象，它里面主要包含了一个render函数
