title: Is there a vue.js equivalent of ngTemplateOutlet?
body: <p>Does vue.js have an equivalent of Angular's <code>*ngTemplateOutlet</code> directive? Let's say I have some components defined like this:</p>
  
  <pre><code>    &lt;template&gt;
          &lt;div id="independentComponent"&gt;
              Hello, {{firstName}}!
          &lt;/div&gt;
      &lt;/template&gt;
      &lt;script&gt;
          export default {
              name: "independentComponent",
              props: ['firstName']
          }
      &lt;/script&gt;
  
      ...
  
      &lt;template&gt;
          &lt;div id="someChildComponent"&gt;
              &lt;slot&gt;&lt;/slot&gt;
              &lt;span&gt;Let's get started.&lt;/span&gt;
          &lt;/div&gt;
      &lt;/template&gt;
      &lt;script&gt;
          export default {
              name: "someChildComponent"
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>I want to be able to do something like this:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="parentComponent"&gt;
          &lt;template #indepdentInstance&gt;
              &lt;independentComponent :firstName="firstName" /&gt;
          &lt;/template&gt;
          &lt;someChildComponent&gt;
              &lt;template #indepdentInstance&gt;&lt;/template&gt;
          &lt;/someChildComponent&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          name: "parentComponent",
          components: {
              someChildComponent,
              independentComponent
          },
          data() {
              return {
                  firstName: "Bob"
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>In Angular, I could accomplish this with</p>
  
  <pre><code>&lt;div id="parentComponent"&gt;
      &lt;someChildComponent&gt;
          &lt;ng-container *ngTemplateOutlet="independentInstance"&gt;&lt;/ng-container&gt;
      &lt;/someChildComponent&gt;
  
      &lt;ng-template #independentInstance&gt;
          &lt;independentComponent [firstName]="firstName"&gt;&lt;/independentComponent&gt;
      &lt;/ng-template&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it looks like Vue requires the element to be written to the DOM exactly where it is in the template. Is there any way to reference an element inline and use that to pass to another component as a slot?</p>