Так что я считаю, что у вас есть компонент карты, который имеет некоторые общие компоненты, и эти компоненты должны выглядеть по-разному в разных случаях.
например, позвольте мне предположить, что эти карты будут содержать данные пользователя, которые являются его аватарным изображением, его / ее именем, которое можно редактировать и т. Д. Теперь эти карты должны выглядеть по-разному для мужчин и женщин
Подход 1 - добавление классов:
Vue.component('my-card', {
props: {
cardType: String,
},
data: function(){
return {
menCardClasses: {
input: {'some-class': true}
},
womenCardClasses: {
input: {'other-class': true}
},
inputClasses: {}
}
},
computed: {
if(this.cardType == 'men'){
this.inputClasses = this.menCardClasses.input;
}
},
template: `<div class='card'><input :class="inputClasses"></div>`
});
При таком подходе ваш компонент карты будет иметь дело с состоянием, а дочерние компоненты классов получат
Подход 2 - компонент оболочки:
Vue.component('my-card', {
props: {
cardType: String,
},
data: function(){
},
computed: {
},
template: `<div class='card'>
<men-card-component v-if="cardType=='men'"></men-card-component>
<women-card-component v-else></women-card-component>
</div>`
});
Vue.component('men-card-component', {
template: `<div class='men-card'><input /></div>`
});
Vue.component('women-card-component', {
template: `<div class='women-card'><input /></div>`
});
В этом подходе компонент карты - это просто оболочка, которая будет отображать другой компонент в зависимости от состояния.
Вы можете выбрать подход, который подходит вам и заставит вас чувствовать себя комфортно.