[Vuejs]-How to let one component correspond with the other for a specific function

by

0👍

✅

I would use events to accomplish this. The migration guide to Vue2 has a good short explanation of how to do simple event routing without using a full Vuex solution. In your case, you would declare a global event hub in one of your js files:

var eventHub = new Vue();

In your selectColor method you would emit the index selected:

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

And in the footer, you would register a listener for the select-color event that calls selectThumb with the payload of the event (which is the selected index):

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

Leave a comment