title: Vue 3 access child component from slots
body: <p>I am currently working on a custom validation and would like to, if possible, access a child components and call a method in there.</p>
  <p><strong>Form wrapper</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;form @submit.prevent=&quot;handleSubmit&quot;&gt;
          &lt;slot&gt;&lt;/slot&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent } from 'vue';
  
  export default defineComponent({
      setup(props, { slots }) {
          const validate = (): boolean =&gt; {
              if (slots.default) {
                  slots.default().forEach((vNode) =&gt; {
                      if (vNode.props &amp;&amp; vNode.props.rules) {
                          if (vNode.component) {
                              vNode.component.emit('validate');
                          }
                      }
                  });
              }
  
              return false;
          };
  
          const handleSubmit = (ev: any): void =&gt; {
              validate();
          };
  
          return {
              handleSubmit,
          };
      },
  });
  &lt;/script&gt;
  </code></pre>
  <p>When I call <code>slot.default()</code> I get proper list of child components and can see their props. However, <code>vNode.component</code> is always <code>null</code></p>
  <p>My code is based from this <a href="https://forum.vuejs.org/t/how-to-properly-access-components-inside-slot-content/4713/7" rel="nofollow noreferrer">example</a> but it is for vue 2.</p>
  <p>If someone can help me that would be great, or is this even possible to do.</p>