如何将一个模板动态插入另一个模板

Question

VueJS的新功能...我有一个组件，希望根据下拉列表中的选择将其他组件传递到其中。我有一个始终会在屏幕上呈现的主模板，其中一部分带有下拉菜单。当我在该下拉列表中进行选择时，我想要在具有ID（或其他标识属性）的主要组件中包含一个div，并将另一个模板推入其中。我认为slot的作用与我想要的相反。

原始模板：

<div class="search-field-with-label-container">
    <el-select v-model="serviceType">
      <el-option
        v-for="serviceType in serviceTypes"
        :key="serviceType.id"
        :value="serviceType"
      >{{ serviceType }}</el-option>
    </el-select>
    <div id="thisIsWhereIWantMyOtherTemplateToRender"
  </div>

第二个模板：

<template>
  <h1>this is the other template</h1>
</template>

Answer 1

您可以将动态组件与keep-alive标签一起使用。

    <keep-alive>
      <component v-bind:is="selectedComponent"></component>
    </keep-alive>

文档为here。