【Vue3】自定义组件

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何自定义组件。

Vue3 组件可以分为两类：

• 页面组件：用于构建独立页面，通常存放在 src/pages 或 src/views 目录下。
• 功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在 src/components 目录下。

本文主要说明如何自定义功能组件。

开发环境

开发步骤及源码

1> 创建 Vue3 工程，参考：【Vue3】工程创建及目录说明。

2> 删除 src 目录下 assets 和 components 目录。

3> 修改 src 目录下 main.ts。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
1
2
3
4

4> 自定义功能组件 Person，在 src 目录下创建 components/Person.vue。

<template>
    <div class="person">
        <h3>姓名：{{ name }}</h3>
        <h3>年龄：{{ age }}</h3>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const name = ref('Harry Potter')
const age = ref(10)
</script>

<style scoped lang="scss">
.person {
    background-color: green;
    color: white;
    padding: 10px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

注意：需要执行 npm install -D sass 命令安装 CSS 预处理器。

5> 修改 Vue 根组件 src/App.vue，引用 src/components/Person.vue。

<template>
  <div class="root">
    <Person />
  </div>
</template>

<script setup lang="ts">
import Person from './components/Person.vue'
</script>

<style scoped lang="scss">
.root {
  background-color: orange;
  padding: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

执行命令 npm run dev，浏览器访问 http://localhost:5173/ 观察自定义组件效果。

6> 还有另一种常用的自定义组件方法：在 src/components 目录下创建与组件同名的文件夹，文件夹下存放 index.vue，如 src/components/Book/index.vue。

<template>
    <div class="book">
        <h4 v-for="book in books" :key="book.id">{{ book.name }}</h4>
    </div>
</template>

<script setup lang="ts" name="Book">
import { reactive } from 'vue'

const books = reactive([
    { id: '001', name: '哈利波特与魔法石' }, 
    { id: '002', name: '哈利波特与密室' }, 
    { id: '003', name: '哈利波特与阿兹卡班的囚徒' },
])
</script>

<style scoped lang="scss">
.book {
    background-color: blue;
    color: white;
    margin-top: 10px;
    padding: 10px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

注意：此处通过 <script> 标签的 name 属性指定组件名称，需要执行 npm i vite-plugin-vue-setup-extend -D 命令安装 setup 扩展，且还要修改根目录下的 vite.config.ts 配置文件如下。

7> 修改 Vue 根组件 src/App.vue，引用 src/components/Book/index.vue。

<template>
  <div class="root">
    <Person />
    <Book />
  </div>
</template>

<script setup lang="ts">
import Person from './components/Person.vue'
import Book from './components/Book/index.vue'
</script>

<style scoped lang="scss">
.root {
  background-color: orange;
  padding: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

执行命令 npm run dev，浏览器访问 http://localhost:5173/ 观察自定义组件效果。