Как разрешить одному компоненту соответствовать другому для определенной функции - PullRequest
Новая
       3

Как разрешить одному компоненту соответствовать другому для определенной функции

0 голосов
/ 06 июля 2018

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

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

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

это кликабельная цветная кнопка: 

 <li
            v-for="(color, index) in machine.content[0].machine_colors"
            :key="color.color_slug"
            v-if="color.inStock"
            v-on:click="selectColor(index)"
            v-bind:class="{ active: (color.color_slug === selectedColor.color_slug)}">
            <img v-bind:src="color.color_dash">
          </li>

это компонент, который меняет цвет: 

<div class="product__carousel">
      <Carousel showIcon v-if="selectedColor" :machineColor="selectedColor"/> <!-- Image carousel gets loaded in -->
    </div>

и компонент, который должен изменить цвет, но не: 

<div id="tab-two-panel" class="panel">
           <footerGallery  v-if="selectedColor && machine" :machineColor="selectedColor"/>
      </div>

Вот сценарий компонента partent: 

export default {
name: 'aboutMachine',
components: {
  Collapse,
  footerGallery,
},
data() {
  return{
    selectedColor: this.getMachineColorContent(),
  }
},
props: {
  main: {
    default () {
      return {};
    },
  },
  machine: {
    default () {
      return {};
    },
  },
},
 methods: {
getMachineColorContent() {
  if (this.selectedColor) {
    return null;
  }
  return this.machine.content[0].machine_colors[0];
},
selectColor(index) {
  this.selectedColor = this.machine.content[0].machine_colors[index];
},

}, } и сам компонент: 

export default {
name: 'footerGallery',
props: {
  showIcon: Boolean,
  machineColor: {
    default () {
      return {};
    },
  },
},
data() {
  return {
    highLightedThumbIndex: 0,
    isActive: undefined,
  };
},
created() {
  this.highLightedThumbIndex = this.highLightedThumbIndex || 0;
},
methods: {
  selectThumb(index) {
    this.highLightedThumbIndex = index;
  },
},
* *} Тысяча двадцать-одина; * * тысяча двадцать две

Это мой main.js 

import Vue from 'vue';
import VueYouTubeEmbed from 'vue-youtube-embed'

import FontAwesome from './libs/fa';
import App from './App';

const eventHub = new Vue();
Vue.use(VueYouTubeEmbed);
Vue.component('font-awesome-icon', FontAwesome);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

1 Ответ

0 голосов
/ 06 июля 2018

Я бы использовал события для достижения этой цели. Руководство по миграции на Vue2 содержит хорошее краткое объяснение того, как выполнить простую маршрутизацию событий без использования полного решения Vuex. В вашем случае вы бы объявили глобальный концентратор событий в одном из ваших js-файлов: 

var eventHub = new Vue();

В вашем методе selectColor вы будете использовать выбранный индекс: 

selectColor(index) {
    this.selectedColor = this.machine.content[0].machine_colors[index];
    eventHub.$emit("select-color",index);
}

И в нижнем колонтитуле вы должны зарегистрировать прослушиватель для события select-color, которое вызывает selectThumb с полезной нагрузкой события (который является выбранным индексом): 

created() {
    this.highLightedThumbIndex = this.highLightedThumbIndex || 0;
    eventHub.$on("select-color",this.selectThumb);
}
...