bootd
@bootd
Гугли и ты откроешь врата знаний!

Как лучше организовать мобильные и десктопные версии компонентов в vue?

Всем привет!))

Задача состоит в следующем, есть 2 вида отображения компонента, мобильный и десктопный.
Отображение их в зависимости от размера экрана это не проблема.

Затронул меня другой вопрос, как лучше их назвать и отображать. Проблема заключается в том, что десктопный компонент может иметь больше входных свойств чем мобильный, либо они вовсе отличаются.

Варианта реализации у меня в голове 2:
1 Вариант:

Сам компонент:
<template>
  <component 
    :is="currentComponent"
    v-bind="$props"
  />
</template>

<script>
export default {
  name: 'MyComponent',
  props: ['prop1',  'prop2',  'prop3',  'prop4'],
  components: {
    DesctopComponent: () => import('./DesctopComponent.vue'),
    MobileComponent: () => import('./MobileComponent.vue')
  },
  computed: {
    currentComponent () {
      return this.mobile
        ? 'MobileComponent'
        : 'DesctopComponent';
    }
  }
}
</script>


Вставка его куда либо:
<template>
  <my-component
    :prop1="value1"
    :prop2="value2"
    :prop3="value3"
    :prop4="value4"
  />
</template>


Проблема в том, что десктопный имеет, например 4 свойства, а мобильный 2. + нам компоненту "контейнеру" нужно будет описать все эти свойства и прокинуть их через v-bind="$props"

Вариант 2: В самом шаблоне, где нужно отображать нужный компонент, мы делаем условие
<template>
  <desctop-component
    v-if="!mobile"
    :prop1="value1"
    :prop2="value2"
    :prop3="value3"
    :prop4="value4"
  />

  <mobile-component
    v-else
    :prop1="value1"
    :prop2="value2"
  />
</template>


Этот вариант избавляет нас от нужны компонента "контейнера" и прокидывания свойств, но заставляет нас при повторном использовании компонента где либо, использовать конструкцию с условиями снова, что делает "мусор" в шаблонах.

Других способов я пока не придумал и не нашел. Подскажите, какие ещё есть способы и какой на ваш взгляд вариант лучше для подобных задач?
  • Вопрос задан
  • 211 просмотров
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae Куратор тега Vue.js
Тлен
Ну если оптимизировать - то desctop в mobile на ходу превратиться не может(может конечно, но такие "экспериментаторы" не обломятся перегрузить страницу). В таком случае: вынести экспорты таких "двойных" компонентов в отдельный файл который сразу при загрузке экспортируют нужный вариант, без всякой лишней динамики.

Если же делать динамично, то написать функцию хэлепер, которая принимает на вход обе версии компонента и возвращает вспомогательный функциональный pass through компонент, который выбирает нужный из двух, а всё остальное просто пробрасывает.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы