组件通信

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发事件通信，提升可读性与复用性。

Vue中的模板引用（Template Refs）用于在声明式编程中直接操作DOM或访问子组件实例。通过ref属性标记元素或组件，并在setup中使用同名响应式变量访问。子组件需通过defineExpose暴露内部方法或属性供父组件调用。操作DOM时，应在onMounted或nextTick中确保DOM已渲染。常见应用包括自动聚焦输入框、集成第三方库和动态获取 …

Vue3 中的 v-on 指令用于处理 DOM 事件，支持内联表达式和方法处理器。事件修饰符如 .stop 和 .prevent 简化了事件流控制和默认行为阻止。按键修饰符如 .enter 和系统修饰符如 .ctrl 用于处理键盘和组合键事件。自定义事件通过 $emit 实现子组件向父组件传递数据，defineEmits 可验证事件参数。常见报错包括 …

第1章：插槽的概念与原理 插槽的定义 在Vue.js中，插槽（Slots）是一种强大的功能，它允许你将内容分发到组件的各个部分。简单来说，插槽是组件内部预留的一个位置，用于放置组件使用者提供的HTML结构。这样，组件的使用者可以根据自己的需求，灵活地填充或替换组件的某些部分，而不需要修改组件的内部实现。