如何让一个组件与另一个组件对应特定功能

Posted 2023-02-23

【中文标题】如何让一个组件与另一个组件对应特定功能

【英文标题】：How to let one component correspond with the other for a specific function

【发布时间】：2018-12-15 03:42:02

【问题描述】：

我有一个组件，我在其中单击机器的颜色，当我更改颜色时，机器会在图像轮播中加载不同的颜色。

现在我还在底部创建了一个组件，其中包含同一台机器的图片库。当我点击页面顶部的颜色按钮时，如何使图片库也改变颜色？

重要提示：这两个组件不在同一个父组件中，但它们已经加载到同一个机器映像中，所以我相信方法没有错。

这是可点击的颜色按钮：

 <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>

下面是子组件的脚本：

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】：

我会使用事件来实现这一点。 Vue2 的migration guide 对如何在不使用完整的 Vuex 解决方案的情况下进行简单的事件路由进行了很好的简短说明。在您的情况下，您将在您的一个 js 文件中声明一个全局事件中心：

var eventHub = new Vue();

在您的 selectColor 方法中，您将发出所选索引：

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

并且在页脚中，您将为调用 selectThumb 的 select-color 事件注册一个侦听器，该事件的有效负载（即选定的索引）：

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

【讨论】：

感谢您的回复！我是将所有这些代码放在我的 main.js 中还是带有实例的新文件中？因为我的 main.js 是全局的并且已经定义了一个新的 vue

您应该将 eventHub 声明放在 main.js 中（您将有两个 Vue 实例，但这没关系）。其他 javascript 片段是对现有代码的修改。在这些方法出现的任何文件中进行这些修改。

知道了！今天会试试这个。非常感谢。

当我尝试全局添加 eventthub 时，它说它已声明但从未使用过。我必须在某处导入它吗？我更改了我的问题以向您提供代码

如果你没有用我添加的行修改函数，它不会被使用。我也不确定是否将其声明为 const。