You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
750 B
39 lines
750 B
1 year ago
|
<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>
|