javascript - 在没有多次导入的情况下创建组件的多个实例

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