vue3 组件开发

一个列表组件

技术栈 vue3+ts

子组件

<template> 
 <ul>    
  <li v-for="column in props.list" :key="column.id">
      <img :src="column.avatar" alt="" />
      <h5>{{ column.title }}</h5>
      <p>{{ column.description }}</p>
      <a href="">进入专栏</a>    
  </li>
</ul>
</template>
<script lang="ts" setup>
import { defineProps, PropType } from 'vue'
export interface ColumnProps {
  id: number,
  title: string,
  avatar: string,
  description: string
}
const props = defineProps({ 
 list: {
    type: Array as PropType<ColumnProps[]>,
    required: true,
    default: () => [] // 提供一个空数组作为初始值  
}})
</script>
<style scoped lang="less">
* {  margin: 0;  padding: 0;}
ul {  display: flex;
  li {    width: 25%;
    margin-right: 30px;
    list-style: none; 
   border: 1px solid #ddd;
    padding-bottom: 20px;
    img { 
     width: 100%;  
  }   
 h5 { 
     text-align: center; 
     font-size: 16px; 
     line-height: 30px;
    }
  }
}
</style>

父组件

template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <ColumnList :list="testData"></ColumnList> 
 </div>
</template>
<script lang="ts" setup>
import ColumnList, { ColumnProps } from '@/components/ColumnList.vue'
const testData: ColumnProps[] = [  {
    id: 1,    title: 'test1的专栏',
    description: '这是一个简介1111',
    avatar: 'https://img1.baidu.com/it/u=3129770633,3933811923&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' 
 }, 
 { 
   id: 2, 
   title: 'test2的专栏',
    description: '这是一个简介222',
    avatar:'https://img1.baidu.com/it/u=3129770633,3933811923&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' 
 }]
</script>