1. 插槽插槽就是子组件预留的占位坑位让父组件可以自定义插入 HTML / 组件内容实现组件内容灵活复用。简单比喻子组件是一个相框slot 就是相框中间空白区域父组件传入图片 / 文字填进这个空白位置。在Vue中有三种插槽对应不同的使用方式默认插槽匿名插槽该插槽一个组件只能存在一个具名插槽子组件多处需要自定义内容给每个 slot 起名字父组件对应 v-slot:名字简写 #名字。作用域插槽普通插槽父只能把内容传给子作用域插槽子组件内部数据反向传给父组件使用。适用场景表格、列表循环子循环列表父自定义每一行渲染。子组件给 slot 绑定自定义属性向外抛数据子组件Card!-- components/Card.vue -- template div classcard h1 !-- 默认插槽一个组件只有一个默认插槽 -- slot/slot /h1 h2 !-- 具名插槽需要多个插槽可以取名字 -- slot namename1/slot /h2 h2 slot namename2/slot /h2 /div /template script setup /script子组件Listtemplate div div v-foritem in list :keyitem.id !-- 子给插槽传数据item 别名row -- !-- 作用域插槽 -- slot :rowitem/slot /div /div /template script setup const list [ { id:1, name:张三 }, { id:2, name:李四 } ] /script父组件script setup langts import Card from ./Card.vue import List from ./List.vue /script template div 父组件 Card p父组件使用子组件默认插槽/p template #name1 p父组件使用子组件具名插槽1/p /template template #name2 p父组件使用子组件具名插槽2/p /template /Card /div div List !-- 父组卷使用子组件作用域插槽 -- template #default{ row } div{{ row.id }} - {{ row.name }}/div /template /List /div /template2. defineOptions版本要求Vue ≥ 3.3 / Vite / Vue CLI 新版内置支持无需导入直接使用宏作用在script setup内声明组件选项name、inheritAttrs、props、emits 等注意在Vite中会自动命名name但是推荐还是要写不然会出现小问题命名了name后在Vue DevTools中可以看到自定义名称而非匿名组件常用于定义组件namescript setup // 直接定义组件名称无需额外script块 defineOptions({ name: UserCard }) /script template div用户卡片/div /template所有选项script setup defineOptions({ // 组件名称最重要用于递归组件、devtools、keep-alive name: TableList, // 是否继承父组件非props属性 inheritAttrs: false, // 自定义渲染函数极少用 render: () {}, // 静态props、emitssetup内优先用defineProps/defineEmits props: [], emits: [], // 其他原生选项components、directives 等不推荐在这里写 }) /script3. 动态组件作用同一位置切换多个组件不用 v-if/v-else 一堆判断通过 is 属性指定要渲染的组件。每次切换组件旧组件执行 unmounted 销毁新组件重新 mounted 创建表单输入、滚动位置、接口数据全部丢失想要保留状态就套上KeepAlive。3.1 实现组件切换父组件 - Tab0script setup langts import { ref } from vue import Tab1 from ./Tab1.vue import Tab2 from ./Tab2.vue defineOptions({ name: Tab0 // 组件名称 }) // 初始值 const current ref(Tab1); /script template button clickcurrent Tab1切换页面1/button button clickcurrent Tab2切换页面2/button !-- 通过:is绑定组件 -- component :iscurrent / /template子组件 - Tab1script setup langts defineOptions({ name: Tab1 }) /script template P我是子组件1/P /template子组件 - Tab2script setup langts defineOptions({ name: Tab2 }) /script template P我是子组件2/P /template3.2 实现组件切换保留缓存keepAlive可以实现缓存不活动的组件实例不销毁再次切换时直接复用保留表单值、滚动位置、接口缓存数据、定时器等。基础用法包裹动态组件:此时切换 Tab1 / Tab2数据不会重置。KeepAlive component :iscurrent / /KeepAliveinclude依赖组件 name:只缓存 TabOne、TabTwo其他组件 每次切换销毁重建KeepAlive includeTabOne,TabTwo component :iscurrent / /KeepAliveexclude排除指定 name不缓存KeepAlive excludeTabTwomax最大缓存实例数超出数量后最久没使用的组件自动销毁KeepAlive max5子组件中缓存专属生命周期钩子只有被 KeepAlive 缓存才触发:被缓存的组件切换时不会执行 onMounted / onUnmounted只会走 activated / deactivated。script setup import { onActivated, onDeactivated, onMounted } from vue // 只会首次创建执行 onMounted(() { console.log(组件创建) }) // 每次切进来都执行 onActivated(() { console.log(组件激活刷新列表/重置查询条件) }) // 每次切走执行 onDeactivated(() { console.log(组件失活清除定时器) }) /script路由场景最常用页面缓存KeepAlive includeUserList,OrderPage router-view / /KeepAlive踩坑点Vue Router4 内部重构了 渲染机制路由视图是动态异步组件不能直接作为 的子节点。必须通过 v-slot 取出底层组件实例再用 渲染才能被 KeepAlive 正常捕获缓存。官方标准插槽写法现在必须用router-view v-slot{ Component } KeepAlive includeUserList,OrderPage component :isComponent / /KeepAlive /router-view4. routerVue Router 是 Vue.js 的官方路由管理器。单页应用的特点页面跳转不会重新加载整个 HTML 页面仅局部更新视图作用建立 URL 地址与页面组件之间的映射关系根据当前 URL 渲染匹配的组件。用法安装vue-routernpm install vue-router4创建路由文件 src/router/index.tsimport { createRouter, createWebHistory } from vue-router import type { RouteRecordRaw } from vue-router // 路由配置 const routes: RouteRecordRaw[] [ {path: /,redirect: /home}, {path: /home,name: Home,component: () import(/views/Home.vue)}, {path: /about,name: About,component: () import(/views/About.vue)} ] // 创建路由 const router createRouter({ history: createWebHistory(), routes }) export default routermain.ts中引入和注册import router from ./router app.use(router)就可以成功通过改变URL加载不同组件了