Vue:组件
组件是 Vue 的核心功能之一，它将 UI 拆分为独立、可复用的代码片段。组件可以理解为自定义的 HTML 元素，它封装了特定的功能和样式。例如一个按钮组件 <my-button>，一个导航栏组件 <app-header>，一个模态框组件 <modal-dialog>。
组件的基本使用
组件注册
import ComponentA from './ComponentA.vue'export default {components: {ComponentA}
}
组件模板
单文件组件结构（.vue文件）：
<template><div class="example">{{ message }}</div>
</template><script>
export default {data() {return {message: '重生之我要学Vue!'}}
}
</script><style scoped>
.example {color: red;
}
</style>
组件通信
父传子 - Props
<!-- 父组件 -->
<child-component :title="parentTitle"></child-component><!-- 子组件 -->
<script>
export default {props: {title: {type: String,default: '默认标题'}}
}
</script>
子传父 - 自定义事件
<!-- 子组件 -->
<button @click="$emit('update', newValue)">提交</button><!-- 父组件 -->
<child-component @update="handleUpdate"></child-component>
每个组件都有以下关键生命周期阶段：
- 创建阶段：
beforeCreate→created→beforeMount→mounted - 更新阶段：
beforeUpdate→updated - 销毁阶段：
beforeUnmount→unmounted
特殊组件类型
动态组件
<component :is="currentComponent"></component>
异步组件
const AsyncComponent = defineAsyncComponent(() =>import('./components/AsyncComponent.vue')
)
递归组件
// 组件内部调用自身
name: 'TreeItem',
template: `<li>{{ model.name }}<ul v-if="model.children"><tree-item v-for="child in model.children" :model="child"></tree-item></ul></li>
`