Vue中如何为动态生成元素设置独立样式并实现单标签激活

问题出在每个<New_page>组件各自维护自己的激活状态，互相之间没有联动。要实现点击新标签时旧标签自动恢复，得把激活状态统一放到父组件管理，子组件根据父组件传递的状态判断自己是否激活。

具体修改步骤 #

1. 父组件新增activeIndex数据，用来记录当前激活的标签索引
2. 给每个<New_page>传递is-active属性，判断当前标签是否为激活状态
3. 子组件点击时，通知父组件更新activeIndex
4. 子组件不再维护自身的激活状态，完全依赖父组件传递的is-active控制样式

修改后的父组件代码 #

<template>
  <div class="navbar">
    <div class="list_pages">
      <New_page 
        v-for="index in page_counter" 
        :key="index" 
        :new_p="false" 
        :index="index" 
        :list="page_arr"
        :is-active="activeIndex === index"
        @update-active="activeIndex = $event"
      />
    </div>
  </div>
</template>

<script>
import New_page from './New_page.vue' // 根据实际组件路径调整

export default {
  components: {
    New_page
  },
  data() {
    return {
      page_counter: 5, // 示例值，替换成你的实际数据
      page_arr: [],
      activeIndex: null // 初始无激活标签，也可以设为默认激活的索引比如1
    }
  }
}
</script>

修改后的<New_page>组件代码 #

<template>
  <div class="pad">
    <div 
      class="card" 
      @click="handleClick"
      <!-- 用class绑定替代内联样式，更易维护 -->
      :class="{ active: isActive }"
      v-if="!new_p"
    >
      <p>{{index}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['new_p', 'index', 'list', 'isActive'],
  methods: {
    handleClick() {
      // 点击时通知父组件更新激活索引
      this.$emit('update-active', this.index)
    }
  }
}
</script>

<style scoped>
.card {
  background-color: #5fc9f3;
  /* 其他默认样式 */
}
.card.active {
  background-color: red;
  /* 激活状态的样式 */
}
</style>

原理说明 #

父组件的activeIndex是唯一的状态源，所有子组件通过is-active属性判断自己是否匹配当前激活索引。点击任意标签时，子组件通过$emit触发父组件更新activeIndex，所有子组件会自动根据新的is-active值更新样式，之前激活的标签因为索引不匹配，会自动恢复默认样式。

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