Suppose we defined the components Tabs and Tab and now use them in the Demo as follows:

<template>
  <div>
    <Radios :selected="x">
      <Radio label="1">Option 1</Radio>
      <Radio label="2">Option 2</Radio>
      <Radio label="3">Option 3</Radio>
    </Radios>
  </div>
</template>
Copy the code

How to access Radio data in the Radios component?

Vue3 can be obtained from the context, so which attribute of the context can be obtained, then use the method of log step by step test

1. Use the setup function, where 1 is props and 2 is context, to log the context on the console using the expansion syntax

/ / Radios components
<script lang="ts">
  import Radio from './Radio.vue'
  export default {
    setup(props, context) {
      console.log({... context}) } }; </script>Copy the code

The log results:

Analysis: Emit is usually used to send events to the parent component. Attrs and slots may contain what we want. Continue logging

2. Log attrs and slots respectively

 setup(props, context) {
      console.log({... context.attrs})console.log({... context.slots}) }Copy the code

The log results:

Attrs is an empty object. Slots has a default function. Continue log

3. log default

setup(props, context) {
      console.log({... context.slots.default()}) }Copy the code

The log results:

The Radios in China use three types of Radio to help students study the language

4. Compare the Type and Radio components

<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>Copy the code

The log results:

Summary: We can see that the result is true, and after logging separately, their contents are the same. In this way, we get the child components through the log test. Furthermore, we see that each component in vue is actually an object, which mainly contains a Render function