vue3.0学习笔记2---尝试开发一个组件

最新推荐文章于 2024-10-20 12:41:37 发布

czl0325

最新推荐文章于 2024-10-20 12:41:37 发布

阅读量485

点赞数

分类专栏： vue3.0 文章标签： vue

本文链接：https://blog.csdn.net/czl0325/article/details/113507369

版权

vue3.0 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

样式库选择

目前好用样式库有：

tailwindcss
Bootstrap

本项目使用bootstrap， npm install bootsharp@next --save 其中next表示最新版本

新建组件ColumnList

新建组件后，可以创建组件的interface

export interface ColumnProps {
    id: number;
    title: string;
    avatar: string;
    description: string;
}

创建props，配置必须传入参数list，类型为ColumnProps的数组，可以使用vue3的PropType属性进行类型断言。

props: {
        list: {
            type: Array as PropType<ColumnProps[]>,
            required: true
        }
    },

app内调用组件

在app.vue中简单写一个数组，做一些数据，传入到组件内，就完成了组件的调用

<template>
  <div class="container">
    <column-list :list="list"></column-list>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import ColumnList, { ColumnProps } from './components/ColumnList.vue';
const testData:ColumnProps[] = [
  {id:1, title: '专栏1', description: '这是专栏1', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F007s9uFmgy1gn7wnixsccj30k00aijrn.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614747631&t=5c5e2ffc44d0dfa3af13b7f4e0c6e12e'},
  {id:2, title: '专栏2', description: '这是专栏2', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd10111%2F145%2Fw608h337%2F20210201%2Fde7f-kiksqxh5466822.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614747653&t=1c3578cf07c53431faed8847eeef645e'}
]

export default defineComponent({
  name: 'App',
  components: {
    ColumnList
  },
  setup() {
    return {
      list: testData
    }
  }
})
</script>