order-ui-pc/src/views/standingBook/anchBook/anchorItem.vue

<template>
  <div>
    <div v-for="item in data" :key="item.tar">
      <div class="anchor-link-item" @click="goAnchor(item.tar)">
        <a
          :class="currentAnchor === item.tar ? 'active-a' : ''"
          href="javascript:void(0)"
        >
          {{ item.title }}
        </a>
      </div>
      <div
        v-if="item.children && item.children.length > 0"
        class="anchor-link-group"
      >
        <!-- 递归当前组件，对应的props 及方法一定要带上，否则不生效 -->
        <AnchorLink
          :data="item.children"
          :current-anchor="currentAnchor"
          @goAnchor="goAnchor"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'AnchorLink',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    currentAnchor: {
      type: String,
      default: ''
    }
  },
  methods: {
    goAnchor(tar) {
      this.$emit('goAnchor', tar)
    }
  }
}
</script>
<style lang="scss" scoped>
a {
  color: black;
  margin: 10px 0;
  display: block;
  text-decoration: none;
}
.active-a {
  color: #2db7f5;
}
.anchor-link-group {
  margin-left: 10px;
}
</style>