Есть ли vue.js-эквивалент ngTemplateOutlet? - PullRequest
Новая
       11

Есть ли vue.js-эквивалент ngTemplateOutlet?

0 голосов
/ 31 октября 2018

Имеет ли vue.js эквивалент директивы Angular * ngTemplateOutlet? Допустим, у меня есть некоторые компоненты, определенные следующим образом: 

    <template>
        <div id="independentComponent">
            Hello, {{firstName}}!
        </div>
    </template>
    <script>
        export default {
            name: "independentComponent",
            props: ['firstName']
        }
    </script>

    ...

    <template>
        <div id="someChildComponent">
            <slot></slot>
            <span>Let's get started.</span>
        </div>
    </template>
    <script>
        export default {
            name: "someChildComponent"
        }
    </script>

Я хочу иметь возможность сделать что-то вроде этого: 

<template>
    <div id="parentComponent">
        <template #indepdentInstance>
            <independentComponent :firstName="firstName" />
        </template>
        <someChildComponent>
            <template #indepdentInstance></template>
        </someChildComponent>
    </div>
</template>
<script>
    export default {
        name: "parentComponent",
        components: {
            someChildComponent,
            independentComponent
        },
        data() {
            return {
                firstName: "Bob"
            }
        }
    }
</script>

В Angular я мог бы сделать это с 

<div id="parentComponent">
    <someChildComponent>
        <ng-container *ngTemplateOutlet="independentInstance"></ng-container>
    </someChildComponent>

    <ng-template #independentInstance>
        <independentComponent [firstName]="firstName"></independentComponent>
    </ng-template>
</div>

Но похоже, что Vue требует, чтобы элемент был записан в DOM именно там, где он находится в шаблоне. Есть ли способ ссылаться на встроенный элемент и использовать его для передачи другому компоненту в качестве слота?

...