Javascript 是否有一个vue.js等效于ngTemplateOutlet？

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>

你好，{{firstName}}！
导出默认值{
名称：“独立组件”，
道具：['firstName']
}
...
让我们开始吧。
导出默认值{
名称：“someChildComponent”
}

我希望能够做到以下几点：

    <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>

导出默认值{
名称：“父组件”，
组成部分：{
一些儿童组成部分，
独立组件
},
数据（）{
返回{
名字：“鲍勃”
}
}
}

在角度上，我可以用

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

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

---

但看起来Vue要求将元素准确地写入DOM中它在模板中的位置。有没有办法内联引用一个元素并将其作为插槽传递给另一个组件？

我不太确定我是否理解您的问题，但如果我想在一个模板中添加两个组件，我会尝试为您提供一些选择

HeaderSection.vue

    <template>
        <div id="header_id" :style="'background:'+my_color">
            welcome to my blog
        </div>
    </template>
    <script>
        export default {

            props: ['my_color']
        }
    </script>

    <template>
        <div id="body_id">
            body section here
        </div>
    </template>
    <script>
        export default {

        }
    </script>

<template>

    <div id="parentComponent">

        <header-section :color="my_color" />

        <body-section />
    </div>
</template>
<script>
    import HeaderSection from "./components/HeaderSection.vue"
    import BodySection from "./components/BodySection.vue"
    export default {

        name: "home",

        components: {
            HeaderSection,
            BodySection
        },

        data() {
            return {
                my_color: "red"
            }
        }
    }
</script>

欢迎来到我的博客
导出默认值{
道具：[“我的颜色”]
}

BodySection.vue

    <template>
        <div id="header_id" :style="'background:'+my_color">
            welcome to my blog
        </div>
    </template>
    <script>
        export default {

            props: ['my_color']
        }
    </script>

    <template>
        <div id="body_id">
            body section here
        </div>
    </template>
    <script>
        export default {

        }
    </script>

<template>

    <div id="parentComponent">

        <header-section :color="my_color" />

        <body-section />
    </div>
</template>
<script>
    import HeaderSection from "./components/HeaderSection.vue"
    import BodySection from "./components/BodySection.vue"
    export default {

        name: "home",

        components: {
            HeaderSection,
            BodySection
        },

        data() {
            return {
                my_color: "red"
            }
        }
    }
</script>

这里是身体部分
导出默认值{
}

home.vue

    <template>
        <div id="header_id" :style="'background:'+my_color">
            welcome to my blog
        </div>
    </template>
    <script>
        export default {

            props: ['my_color']
        }
    </script>

    <template>
        <div id="body_id">
            body section here
        </div>
    </template>
    <script>
        export default {

        }
    </script>

<template>

    <div id="parentComponent">

        <header-section :color="my_color" />

        <body-section />
    </div>
</template>
<script>
    import HeaderSection from "./components/HeaderSection.vue"
    import BodySection from "./components/BodySection.vue"
    export default {

        name: "home",

        components: {
            HeaderSection,
            BodySection
        },

        data() {
            return {
                my_color: "red"
            }
        }
    }
</script>

从“/components/HeaderSection.vue”导入HeaderSection
从“/components/BodySection.vue”导入BodySection
导出默认值{
姓名：“家”，
组成部分：{
校长部，
身体部分
},
数据（）{
返回{
我的颜色：“红色”
}
}
}

您不能重复使用像

ngTemplateOutlet

这样的模板，但可以结合

$refs

、

v-pre

和运行时模板编译的思想来实现这一点

首先，创建可重用模板（

）：

可重用模板

现在，您可以重用

independentInstance

模板：

<v-runtime-template
    :template="$refs.independentInstance.innerHTML"
    v-if="$refs.independentInstance">
</v-runtime-template>

但您可以将其包装在

对象中

，它将起作用：

@Component({
    components: {
        VRuntimeTemplate
    }
})
export default class ObjectList extends Vue {
    reusableContext = {
        readWriteVar: '...'
    };

    readOnlyVar = '...';
}

您可以尝试由Vue核心团队成员编写

PortalVue是两个组件的集合，允许您渲染 组件的模板（或其中的一部分）在文档中的任何位置—甚至 在Vue应用程序控制的部件之外

示例代码：

<template>
  <div id="parentComponent">
    <portal to="independentInstance">
      <!-- This slot content will be rendered wherever the <portal-target>
           with name 'independentInstance' is located. -->
      <independent-component :first-name="firstName" />
    </portal>
    
    <some-child-component>
        <portal-target name="independentInstance">
          <!--
          This component can be located anywhere in your App.
          The slot content of the above portal component will be rendered here.
          -->
        </portal-target>
    </some-child-component>
  </div>
</template>

还有一个是由同一作者编写的，较小，但将组件安装到body元素的末尾。

X-Templates 使用

x模板

。在

index.html

文件中定义脚本标记

然后，

x-模板

可以在模板定义中的多个组件中引用为

#我的模板

运行示例代码段

请参阅Vue.js文档了解有关的详细信息

Vue.component（'my-firstname'{
模板：“#我的模板”，
数据（）{
返回{
标签：“名字”
}
}
});
Vue.component（'my-lastname'{
模板：“#我的模板”，
数据（）{
返回{
标签：“姓氏”
}
}
});
新Vue({
el:“#应用程序”
})

{{label}}

这不是问题的答案。您演示了父子组件的用法。问题是如何在不创建组件的情况下使用通用html标记而不在同一组件中复制。这似乎很有趣，但有些情况下对我不起作用。链接不可用很多时候，在一个框架中按照另一个框架的确切原则编写解决方案是不可能的。你到底想在这里完成什么？我相信会有一个vue的方法来做这件事。