vue实现分解结构
Vue 实现组件分解结构的方法
组件化设计原则
将 UI 拆分为独立可复用的组件，每个组件负责特定功能或视图。遵循单一职责原则，保持组件高内聚低耦合。大型组件应按功能或模块拆分为子组件。
单文件组件结构
使用 .vue 文件组织组件，包含模板、脚本和样式三部分：
<template>
<!-- 组件HTML结构 -->
</template>
<script>
export default {
// 组件逻辑
}
</script>
<style scoped>
/* 组件样式 */
</style>父子组件通信
通过 props 向下传递数据，使用 $emit 向上触发事件：
<!-- 父组件 -->
<child-component :data="parentData" @update="handleUpdate"/>
<!-- 子组件 -->
<script>
export default {
props: ['data'],
methods: {
sendData() {
this.$emit('update', newData)
}
}
}
</script>插槽机制
通过 <slot> 实现内容分发，支持具名插槽和作用域插槽：
<!-- 容器组件 -->
<template>
<div class="container">
<slot name="header" :user="user"></slot>
<slot></slot>
</div>
</template>
<!-- 使用组件 -->
<container-component>
<template v-slot:header="{ user }">
{{ user.name }}
</template>
<p>默认内容</p>
</container-component>状态管理方案
复杂应用使用 Vuex 或 Pinia 管理全局状态：
// Pinia示例
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
}
}
})动态组件加载
使用 <component :is=""> 实现动态组件切换：
<component :is="currentComponent" :key="componentKey"/>组合式API组织
使用 setup() 和组合函数拆分复杂逻辑：
// useUser.js
export function useUser() {
const user = ref(null)
const fetchUser = async () => {
user.value = await getUserData()
}
return { user, fetchUser }
}
// 组件中使用
import { useUser } from './useUser'
export default {
setup() {
const { user, fetchUser } = useUser()
return { user, fetchUser }
}
}
