组件通信

Vue组件开发涵盖基本原则（单一职责、可复用、可维护）、设计实践（规范Props、自定义事件、插槽、组合式API复用逻辑）、通信方式（Props/Events、Provide/Inject、Pinia）、性能优化（异步组件、memo、虚拟列表）及常见问题排查（类型不匹配、事件绑定错误等）。

Vue组件通信中，Props实现父传子，支持数组、对象（带类型验证）及TypeScript声明，传递注意大小写规范，遵循单向数据流（子不直接修改，可复制本地或用计算属性）。自定义事件实现子传父，子通过$emit触发事件（可传参数），父用v-on监听，可声明事件及验证。

Vue3组件化开发具复用（一次编写多处用）、可维护（模块化拆分、单一职责）、协作（团队并行开发）三大价值。组件以.vue单文件形式存在，含模板、逻辑及样式，支持局部/全局注册。通信通过Props（父传子）和Emits（子传父）实现。

Vue 3模板引用可直接访问DOM或组件实例，与响应式系统协同实现动态操作，v-for生成响应式数组。父组件通过useTemplateRef+defineExpose调用子组件方法，优先props/emit通信。需在onMounted访问，可集成Chart.js等第三方库。

Vue 3模板引用通过ref连接声明式代码与DOM或子组件实例，用于自动聚焦、调用子组件方法等。Composition API 3.5+用useTemplateRef，之前需手动声明；Options API用this.$refs。子组件需defineExpose暴露属性，v-for中ref生成数组（顺序可变），函数式ref可动态处理。使用需在挂载后访问，避免 …

Vue3条件渲染核心是v-if系列指令，v-if真实销毁/创建组件，v-show仅切换CSS控制显示/隐藏；复杂分支需拆分组件，父组件控制条件渲染，子组件（如UserProfile和GuestLogin）处理具体内容，通过props传数据、emit发事件通信，提升可读性与复用性。