Question

因此，当前我要使用不同的名称多次导入组件。

import Page1 from "./Page/Page"
import Page2 from "./Page/Page"
import Page3 from "./Page/Page"
import Page4 from "./Page/Page"

之所以这样做，是因为我希望每个实例都有自己的属性集，然后使用<keep-alive>来保持其状态。

我也在<component :is=""中使用它们。

我想知道是否存在一种无需多次导入即可创建多个实例的方法。

代码和框：

https://codesandbox.io/s/5x391j8y4x

您会注意到，如果我在HelloWorlds之间切换，则输入将保留其实例（输入将更改为它们持有的内容）

Answer 1

您不需要使用<component>，因为您只有一种要使用的组件类型：watch: { 'Work.sub': { immediate: true, async handler(sub) { // For each image URL, attempt to fetch the image, and if it returns // data (image exists), collect the URL. Otherwise, default. this.images = await Promise.all(Object.keys(sub).map(async (key) => { const img = sub[key]; if (!img) return this.default_avatar; const url = `//placekitten.com/${img}`; const { data } = await axios.get(url); return data ? url : this.default_avatar; })); } } }。仅当您要动态呈现不同的组件类型时才需要HelloWorld。

之所以需要<keep-alive>是因为<component>组件具有本地状态（HelloWorld），一旦销毁该组件实例，该状态就会丢失。

您将需要使用key来强制Vue根据页面实例化msg的新实例，和您需要HelloWorld来防止每个实例实例在页面之间切换时不会被破坏。

这是一个例子：

<keep-alive>

<ul>
  <li
    v-for="page in pages"
    @click="currentPage = page" 
    :key="page.key">{{ page.title }}</li>
</ul>

<keep-alive>
  <hello-world
    :key="currentPage.key"
    :title="currentPage.title"/>
</keep-alive>

创建组件的多个实例而无需多次导入

1 个答案: