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

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> ，因为您只有一种要使用的组件类型： HelloWorld 。 <component>仅在您想要动态呈现不同的组件类型时才需要。

您需要<keep-alive>的原因是因为HelloWorld组件具有本地状态 ( msg )，一旦组件实例被销毁，该状态就会丢失。

您将需要使用key来强制 Vue 基于页面实例化一个新的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>

import HelloWorld from './components/HelloWorld'

export default {
  name: "App",
  
  components: {
    HelloWorld,
  },

  data() {
    const pages = [
        {
            key: "home",
            title: "Home"
        },
        {
            key: "about",
            title: "About"
        },
        {
            key: "contact",
            title: "Contact"
        }
    ]
    const currentPage = pages[0]

    return {
      currentPage,
      pages
    }
  }
}