什么是组件？
在前端开发中，组件是构建用户界面的基本单元。它们可以看作是具有特定功能的独立模块。Vue.js 中的组件系统允许开发者将复杂的UI分解为更小、更可管理的部分，这些部分可以复用和维护。Vue3 在 Vue2 的基础上进行了改进，使得组件更加高效且易于使用。
创建一个简单的组件
使用 <script setup> 语法创建组件
Vue3 引入了一种新的语法 <script setup>，它简化了组件的定义方式，并且提高了代码的可读性和可维护性。
-- -------------------- ---- -------
----------
---- -----------------
------ -- ---- ---
------
-----------
------- ------
------ - --- - ---- -----
----- ---- - -----------
---------
------ -------
--------- -
---------- -----
------ -----
-
--------在这个例子中，我们定义了一个名为 greeting 的组件，它显示一条问候信息。<script setup> 内部可以使用组合式 API（Composition API），如 ref 来创建响应式数据。
使用选项式 API 创建组件
如果你更喜欢传统的选项式 API，Vue3 同样支持这种方式。
-- -------------------- ---- -------
----------
---- -----------------
------ -- ------- ---
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------
-
-
-
---------
------ -------
--------- -
---------- -----
------ -----
-
---------在这个版本中，我们使用了 data() 函数来返回组件的状态，这种方式与 Vue2 的做法相似。
组件通信
组件之间的通信是前端应用中的一个重要方面。Vue3 提供了几种方法来实现这一点。
父子组件间的通信
通过 Props 传递数据
父组件可以通过 props 将数据传递给子组件。
-- -------------------- ---- ------- ---- ------------------- --- ---------- --------------- ------------------------ -- ----------- ------- ------ ------ -------------- ---- ---------------------- ----- ------------- - ------ ---- -------- ---------
<!-- ChildComponent.vue -->
<template>
<div>{{ message }}</div>
</template>
<script setup>
defineProps(['message'])
</script>通过事件触发响应
子组件可以向父组件发送事件。
-- -------------------- ---- ------- ---- ------------------ --- ---------- ------- ------------------------- ---------------- ----------- ------- ------ ------ - ----------- - ---- ----- ----- ---- - ---------------------------- -------- ------------- - ------------------- ----- -- - ------ -------- - ---------
-- -------------------- ---- ------- ---- ------------------- --- ---------- --------------- -------------------------- -- ----------- ------- ------ ------ -------------- ---- ---------------------- -------- -------------------- - -------------------- - ---------
非父子关系组件间通信
对于非父子关系的组件，Vue3 推荐使用 Vue Router 或 Vuex 进行状态管理，或者利用自定义事件总线（Event Bus）。
插槽（Slots）
插槽是一种强大的工具，允许你在组件的模板中定义可替换的内容区域。
默认插槽
-- -------------------- ---- -------
---- ------------------- ---
----------
-------------
------- -- --- ------- ---- ------------
--------------
-----------
---- --------------- ---
----------
---- ---------------------
-------------
------
-----------具名插槽
具名插槽允许你在一个组件中定义多个插槽区域。
-- -------------------- ---- -------
---- ------------------- ---
----------
-------------
--------- --------
---------- ------------
-----------
--------- ---------
------- ------- ---- ---------
-----------
--------- --------
-------------- ----------------
-----------
--------------
-----------
---- --------------- ---
----------
---- ---------------------
--------
----- ---------------------
---------
------
-------------
-------
--------
----- ---------------------
---------
------
-----------动态组件与异步组件
动态组件
动态组件允许根据条件渲染不同的组件。
-- -------------------- ---- ------- ---------- ---------- ----------------------------------- ----------- ------- ------ ------ ---------- ---- ------------------ ------ ---------- ---- ------------------ ----- ---------------- - --------------- -- -------- ---------------- -- ---------
异步组件
异步组件用于按需加载，以提高应用的初始加载速度。
const AsyncComponent = () => import('./AsyncComponent.vue')
<template>
<AsyncComponent v-if="showComponent" />
</template>总结
本章介绍了 Vue3 中组件的基础知识，包括组件的创建、组件间的通信机制以及一些高级特性如动态组件和异步组件。掌握这些概念是构建复杂 Vue 应用的关键。在接下来的章节中，我们将进一步探讨组件的高级用法及最佳实践。