文章目录slot插槽插槽示例1、创建components/MyCard.vue3、index.js配置路由并访问具名插槽示例1、创建components/MultiMyCard.vue2、创建views/MultiMyCardShowViews.vue3、index.js配置路由并访问一个vue里面只能有一个slot吗?组合式函数组合式函数示例1、创建composables/useCounter.js2、创建views/CounterTestView.vue3、index.js配置路由并访问组合式函数和普通函数的区别订购vue笔记(三)组合式函数、插槽slot插槽插槽机制主要是为了复用。主要有两种插槽方式1、默认插槽 # 推荐就是一个可以有多个slot但是只有最后一个生效2、具名插槽 # 可以有多个插槽示例机制标签中的内容替换填充到slot标签位置。1、创建components/MyCard.vue!-- src/components/MyCard.vue --templatedivclasscard-boxslot/slot!-- 这个坑用来接收外面塞进来的内容 --/div/templatestylescoped.card-box{border:1px solid #eee;padding:15px;border-radius:8px;box-shadow:0 2px 4pxrgba(0,0,0,0.1);}/style2、创建views/CourseList.vue!-- src/views/CourseList.vue --templatediv!-- 第一次使用塞入 Vue3 课程 --MyCardh3Vue3 零基础入门/h3p价格99元/p/MyCard!-- 第二次使用塞入 Java 课程 --MyCardh3Java 进阶架构/h3p价格199元/p/MyCard/div/templatescriptsetup// 1. 必须先把模具“拿”过来importMyCardfrom/components/MyCard.vue;/script3、index.js配置路由并访问{path:/courseListView,name:CourseListView,component:CourseListView},然后访问地址http://localhost:5173/courseListView# courseListView是自定义的路径名具名插槽示例机制有具名的内容填到具名插槽内没具名的内容填到默认插槽内1、创建components/MultiMyCard.vuetemplatedivclasscard-box!-- 坑1头部区域 --divclasscard-headerslotnameheader默认标题/slot/div!-- 坑2正文区域默认插槽 --divclasscard-bodyslot/slot/div!-- 坑3底部操作区 --divclasscard-footerslotnamefooter默认按钮/slot/div/div/templatestylescoped.card-box{border:1px solid #ddd;border-radius:8px;padding:15px;width:300px;box-shadow:0 2px 8pxrgba(0,0,0,0.1);}.card-header{font-size:18px;font-weight:bold;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eee;}.card-body{color:#666;margin-bottom:15px;min-height:50px;}.card-footer{text-align:right;padding-top:10px;border-top:1px solid #eee;}/style2、创建views/MultiMyCardShowViews.vuetemplatedivclasspage-containerh2今日推荐课程/h2divclasscard-list!-- 第一张卡片 --MultiMyCard!-- 填坑1头部 --template#header Vue3 零基础入门/template!-- 填坑2正文默认坑直接写内容 --p带你从环境搭建一路学到项目实战新手必学/p!-- 填坑3底部按钮 --template#footerbuttonclassbtn-primary99元 立即抢购/button/template/MultiMyCard!-- 第二张卡片 --MultiMyCard!-- 填坑1头部 --template#header☕ Java 进阶架构/template!-- 填坑2正文 --p深入理解微服务、高并发与底层源码架构师进阶之路。/p!-- 填坑3底部按钮 --template#footerbuttonclassbtn-primary199元 立即抢购/button/template/MultiMyCard/div/div/templatescriptsetup// 1. 引入我们刚才写的组件importMultiMyCardfrom/components/MultiMyCard.vue;/scriptstylescoped.page-container{padding:20px;}.card-list{display:flex;gap:20px;/* 卡片之间留点间距 */margin-top:15px;}.btn-primary{background-color:#409eff;color:white;border:none;padding:6px 15px;border-radius:4px;cursor:pointer;}.btn-primary:hover{background-color:#66b1ff;}/style3、index.js配置路由并访问{path:/multiMyCardShowViews,name:MultiMyCardShowViews,component:MultiMyCardShowViews},然后访问http://localhost:5173/multiMyCardShowViews一个vue里面只能有一个slot吗?分默认插槽还是具名插槽。默认插槽可以有多个但是只有最后一个生效所以所默认插槽推荐只有一个。具名插槽可以有多个通过名字来区分也可以和默认插槽组合使用。组合式函数组合式函数的核心就是逻辑复用。组合式函数示例1、创建composables/useCounter.js规则函数名必须use开头内部用Vue响应式API最后return状态/方法// useCounter.jsimport{ref}fromvue// 最简组合式函数exportfunctionuseCounter(init0){// 响应式数字constcountref(init)// 操作方法constadd()count.valueconstsub()count.value--// 对外暴露变量和方法return{count,add,sub}}2、创建views/CounterTestView.vuetemplatedivp数字{{ count }}/pbuttonclickadd1/buttonbuttonclicksub-1/button/div/templatescriptsetup// 导入组合式函数import{useCounter}from../composables/useCounter// 调用一次生成独立的计数器逻辑const{count,add,sub}useCounter(10)/script3、index.js配置路由并访问{path:/counterTestView,name:CounterTestView,component:CounterTestView},组合式函数和普通函数的区别维度普通JS函数(函数套用)Vue组合式函数(useXXX)能否使用ref/watch/生命周期❌不可以✅完全支持变量是否响应式、驱动页面更新❌普通变量无响应✅ref自动响应视图调用位置任意地方无限制仅setup顶层不能放点击/定时器状态持久函数执行完变量销毁状态绑定组件长期保存适用场景纯计算、工具方法页面交互、带DOM/生命周期逻辑互相嵌套随便嵌套无限制允许互相嵌套但仍遵守setup调用规则订购