Vue 3 的组件系统是其核心特性之一，它允许开发者将复杂的用户界面拆分成可重用的、独立的代码块。以下是关于 Vue 3 组件系统的一些基础知识。
组件定义
在 Vue 3 中，组件可以通过 <script setup> 语法或者传统的 Vue 文件方式来定义。
// 使用 <script setup>
<template>
<div>这是一个组件</div>
</template>
<script setup>
</script>
或者
// 使用 Vue 文件方式
<template>
<div>这是一个组件</div>
</template>
<script>
export default {
// ...
}
</script>
组件注册
组件可以在全局或局部注册。
// 全局注册
Vue.component('MyComponent', MyComponent);
// 局部注册
export default {
components: {
MyComponent
}
}
组件通信
组件之间可以通过 props、events 和 slots 进行通信。
- Props: 用于父组件向子组件传递数据。
- Events: 子组件可以通过事件向父组件发送消息。
- Slots: 允许将内容组合到组件模板中。
组件生命周期
Vue 3 组件有多个生命周期钩子，如 mounted, updated, unmounted 等，用于在组件的不同阶段执行操作。
组件封装
组件可以通过封装逻辑和模板来提高代码的可维护性和可重用性。
图片示例
以下是一个组件中使用的图片示例：