<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts" name="TheWelcome">
import { defineProps, withDefaults } from "vue";
import { type persos } from "@/types";

// 只接收list/
// defineProps(['list'])

// 接收list+限制类型
// defineProps<{list:persos}>()

// 接收list + 限制类型 + 限制必要性 +指定默认值
withDefaults(defineProps<{list?:persos}>(),{
  list:() => [{id:'qwe1', name:'请问饿1', age: 19}]
})
// 接收list，同时将props保存起来
// let x = defineProps(['a', 'list'])

// console.log(x);

</script>

<template>
  <div class="TheWelcome">
    <ul>
      <li v-for="e in list" :key="e.id">{{ e.name }} -- {{ e.age }}</li>
    </ul>
  </div>
</template>

<style scoped>
.TheWelcome {
  background-color: skyblue; /* 设置背景颜色 */
  box-shadow: 0 0 10px; /* 添加阴影效果 */
  border-radius: 10px; /* 设置圆角半径 */
  padding: 20px; /* 设置内边距 */
}

/* 设置按钮之间的间距 */
button {
  margin: 0 5px;
}

/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
li {
  font-size: 20px;
}
</style>
