<template>
  <h3>{{ title }}</h3>
  <ul>
    <!--  触发事件  -->
    <li v-for="(item, index) in list_data" :key="index" @click="handleClick(item)">{{ index }} - {{ item }}</li>
  </ul>
</template>

<script>
export default {
  props: {
    title: String,
    list_data: {
      type: Array,
      default: () => [],
      required: true,
      validator: value => {
        return value.length >= 0
      }
    }
  },
  // 1. 注册自定义事件
  emits: ['selected'],
  methods: {
    // 2. 封装一个本地发法，用于触发$emit, $emit格式为(自定义事件名称，参数)
    handleClick(item) {
      this.$emit("selected", item);
    }
  },
  mounted() {
    console.log(this.list_data)
  }
}
</script>

<style scoped>

</style>
