Vue动态创建兄弟组件数据传递：点导航激活状态切换问题

Hey there! Let's get this dot navigation sorted out for you—this is a super common scenario, and we can solve it cleanly with Vue's core principles, no messy workarounds needed.

The key here is to centralize the active state in the parent component. Since the parent controls all the dot children, it's the perfect place to manage which dot is active. This follows Vue's one-way data flow and is absolutely not a "bad practice"—it's actually the recommended approach for component communication in cases like this.

Here's how to implement it step by step:

1. Update the Parent Component (DotSideNavi) #

We'll add a activeIndex data property to track which dot is active, then pass the active state to each child and listen for click events to update the state.

<template>
  <div class="dot-side-nav">
    <dot-navi-elem 
      v-for="(n, index) in 4" 
      :key="index"
      :is-active="index === activeIndex"
      @dot-click="activeIndex = index"
    />
  </div>
</template>

<script>
import DotNaviElem from '~/atoms/DotNaviElem.vue';

export default {
  components: { DotNaviElem },
  data() {
    return {
      activeIndex: 0 // Start with the first dot active
    };
  }
};
</script>

2. Update the Child Component (DotNaviElem) #

The child will receive the is-active prop to determine its active class, and emit a custom event when clicked to notify the parent.

<template>
  <span 
    class="dot-wrapper" 
    :class="{ active: isActive }"
    @click="$emit('dot-click')"
  >
    <!-- Your dot content here (e.g., a circle) -->
    <span class="dot"></span>
  </span>
</template>

<script>
export default {
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style scoped>
/* Example styles—adjust to your needs */
.dot-wrapper {
  display: block;
  margin: 1rem 0;
  cursor: pointer;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #aaa;
  transition: background-color 0.2s ease;
}

.dot-wrapper.active .dot {
  background-color: #2d3748; /* Active state color */
}
</style>

Why This Works #

• Single Source of Truth: The parent's activeIndex is the only place tracking which dot is active. This eliminates any state inconsistencies (like your earlier issue where only one dot updated with Vuex).
• Clean Communication: The child emits a click event, the parent updates the state, and all children automatically reflect the new state. No global event buses, no manual deactivation of individual dots.
• Scalable: If you later need more dots or dynamic content, just update the v-for loop to use an array of data instead of a fixed number (e.g., v-for="(slide, index) in slides").

To address your previous attempts:

• Your $emit/$on issue likely came from using a global event bus instead of direct parent-child communication—this approach avoids that repetition.
• Vuex is overkill here since the state is localized to this component. Saving Vuex for app-wide state keeps things lightweight.
• Manual deactivation of each dot is unnecessary because the parent's single state controls all children's active status automatically.

内容的提问来源于stack exchange，提问作者StLia