Как в компоненте Vue подгружать разные шаблоны, оставляя нетронутым содержимое JS-кода?

Question

[Алексей]

Доброго дня!

Есть компонент Vue. Необходимо в зависимости от ситуации подгружать в раздел разный код шаблона, оставляя при этом весь JS нетронутым. Можно конечно сделать типа так:

<template>
  <div v-if="situation1">
    (шаблон 1)
  </div>
  <div v-else>
    (шаблон 2)
  </div>
</template>
<script>
  (одинаковый код для обоих шаблонов)
</script>

Проблема в том, что версии шаблонов, кроме того, что имеют сильно разную вёрстку, ещё и достаточно объёмные, чтобы пихать их в один файл. Неудобно потом этим управлять. Хотелось бы что-то типа импортирования по условию. В доке не нашёл.
Есть ли какое-то решение, кроме вышеуказанного?

Answer 1

[Evgeny Kulakov]

<template>
  <div>
    <component :is="ComponentDependingOnTheCondition">
  </div>
</template>
<script>
  (одинаковый код для обоих шаблонов)
</script>

Comments

[Алексей]

У меня в обоих шаблонах не просто HTML - там переменные и функции, которые определены в script
Это будет работать или нужно передать туда ВЕСЬ контекст?

[Evgeny Kulakov]

Алексей, просто представьте, что ваш шаблон - это отдельный компонент, исходя из вашего условия отображаете соответствующий компонент и передаете в него необходимые props и listeners или используете глобальный стейт внутри шаблона для получения данных.

[Алексей]

Evgeny Kulakov, чтобы был понятен масштаб проблемы, покажу на примере:

<template>
  <div v-if="situation1">
    (шаблон 1, здесь ссылки на Comp1...CompN, var1...varN, fn1...fnN)
  </div>
  <div v-else>
    (шаблон 2, здесь ссылки на Comp1...CompN, var1...varN, fn1...fnN)
  </div>
</template>

<script>
import Comp1 from '@/components/Comp1'
import Comp2 from '@/components/Comp2'
...
import CompN from '@/components/CompN'

export default {
  name: 'MyComponent',
  components: {
    Comp1,
    Comp2,
    ...
    CompN
  },
  data: () => {
    return {
      var1: null,
      var2: null,
      ...
      varN
    }
  },
  methods: {
    fn1()...
    fn2()...
    fnN()...
  },
  ...
}
</script>

Если бы речь шла о props, у меня бы вообще не возник вопрос. Кроме props, которых кстати может и не быть, в шаблоны надо передать и все Comp1...CompN, var1...varN, fn1...fnN. Это немножко другое, собственно об этом и вопрос.

[Evgeny Kulakov]

Алексей, а зачем передавать сами компоненты? Почему в компоненте шаблона их не заимпортировать и использовать? var1...varN, fn1...fnN - вот это все можно также через v-bind передать в принципе. Хотя есть более стандартная практика, если стоит задача обрабатывать что-то в родительском компоненте через функции fn1...fnN - то вы вызываете emit в компоненте шаблона и далее в родительском компоненте обрабатываете. Псевдокод:

<component :is="ComponentDependingOnTheCondition" v-bind="{var1...varN}" v-on="{'some-event-1': fn1, ...,'some-event-N': fnN}">

[Алексей]

Evgeny Kulakov, да, v-bind и emit - это реально, но в моём случае слишком сложно. "Дешевле" будет сделать так, как в я описал в вопросе.

Спасибо!