Vue: визуализация компонента по-разному, в зависимости от родительских компонентов

Question

У меня есть несколько вариантов карт в моем приложении. Каждая карточка содержит общие подкомпоненты (текстовые блоки, аватары, изображения)

Я хочу назначить определенные классы css компоненту, если он является родственным (не обязательно прямым потомком) определенного компонента карты.

Или добавьте некоторые элементы оболочки HTML, когда компонент отображается на определенной карте.

Каков рекомендуемый способ достижения этого?

Или нужно создавать разные компоненты для каждого варианта карты?

Answer 1

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

например, позвольте мне предположить, что эти карты будут содержать данные пользователя, которые являются его аватарным изображением, его / ее именем, которое можно редактировать и т. Д. Теперь эти карты должны выглядеть по-разному для мужчин и женщин

Подход 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>`
});

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

Вы можете выбрать подход, который подходит вам и заставит вас чувствовать себя комфортно.