Создание нескольких экземпляров компонента без нескольких импортов

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="".

Мне было интересно, есть ли способ создать несколько экземпляров без многократного импорта.

Codesandbox:

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