<template>
  <div>
    <div v-for="item in outlineData" :key="item.dest">
        <h5 @click="outlineItem(item)" >{{ item.title }}</h5>
        <outlineItem class="item" v-if="item.items" :outlineData="item.items" @outline_item="$emit('outline_item', $event)"></outlineItem>
    </div>
  </div>
</template>
<script>
export default {
  name: 'outlineItem',
  props: {
    outlineData: { type: Array, default: () => [] }
  },
  methods: {
    outlineItem (e) {
      this.$emit('outline_item', e)
    }
  }
}
</script>
<style scoped lang="less">
.item {
  text-indent: 2em;
}
h5 {
  cursor: pointer;
}
</style>
