<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"
          @goAnchor="goAnchor"
          :currentAnchor="currentAnchor"
        ></AnchorLink>
      </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>
