组件

@Component
Vue 中每个组件都是以 单文件组件 - SFC 的形式存在
每个组件可以被其它组件导入|引入并多次使用
适合模块化开发和团队协作
Procedure
创建

创建组件/子组件,后缀名为 .vue,如 HelloWorld.vue

位置:普通组件放在 components 目录,并根据需要进一步分类;如视图类组件放在 views 目录

命名:普通组件根据功能命名;视图类组件采用前缀或后缀的形式加以区分

<script setup>
    //逻辑
</script>
    
<template>
    //结构
</template>

<style>
    //样式
</style>
引入

父组件在 <script> 引入子组件

引入时,输入组件部分或全名,IDE会自动获取组件及补充相对路径;注意看代码提示

不能省略后缀名 .vue

可以使用相对路径

也可以使用路径别名 @ 从 src 开始引用 - 建议

<script setup>
    import HelloWorld from '@/components/HelloWorld.vue'
</script>

为了按需引入,减少加载时间,特别是首屏加载,通常采用 异步组件 的形式引入

采用了异步组件,打包的时,会拆分成多个 .js 文件

import { defineAsyncComponent } from 'vue'

const HelloWorld = defineAsyncComponent(() =>
  import('./components/HelloWorld.vue')
)
使用

父组件在结构 <template> 中使用组件/子组件

怎么引入就怎么使用

可以使用单标签或双标签

可以多次使用

<template>
    <h1>Here is a child component!</h1>
    <HelloWorld />
    <HelloWorld></HelloWorld>
</template>
Global Registration
使用 Vue 应用实例的 .component() 方法,让组件在当前 Vue 应用中全局可用
通常在 main.js 中引入/注册并声明
其它组件直接使用,无需引入
更多信息,请访问 组件注册 - Component Registration
import Footer from '@/components/Footer.vue';

app.component('Footer', Footer)
Homework
[] 封装版权组件
请使用学号和姓名信息封装组件,其它内容和样式不限
[] 封装轮播组件
请使用在线图片资源完成封装,其它内容和样式不限