Всем привет!))
Задача состоит в следующем, есть 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>
Этот вариант избавляет нас от нужны компонента "контейнера" и прокидывания свойств, но заставляет нас при повторном использовании компонента где либо, использовать конструкцию с условиями снова, что делает "мусор" в шаблонах.
Других способов я пока не придумал и не нашел. Подскажите, какие ещё есть способы и какой на ваш взгляд вариант лучше для подобных задач?
