企业官网建设流程全解析

vue笔记(三)组合式函数、插槽

slot插槽

插槽机制主要是为了复用。

主要有两种插槽方式
1、默认插槽 # 推荐就是一个，可以有多个slot，但是只有最后一个生效
2、具名插槽 # 可以有多个

插槽示例

机制：
标签中的内容替换填充到slot标签位置。

1、创建components/MyCard.vue

<!-- src/components/MyCard.vue --><template><divclass="card-box"><slot></slot><!-- 这个坑用来接收外面塞进来的内容 --></div></template><stylescoped>.card-box{border:1px solid #eee;padding:15px;border-radius:8px;box-shadow:0 2px 4pxrgba(0,0,0,0.1);}</style>

2、创建views/CourseList.vue

<!-- src/views/CourseList.vue --><template><div><!-- 第一次使用：塞入 Vue3 课程 --><MyCard><h3>Vue3 零基础入门</h3><p>价格：99元</p></MyCard><!-- 第二次使用：塞入 Java 课程 --><MyCard><h3>Java 进阶架构</h3><p>价格：199元</p></MyCard></div></template><scriptsetup>// 1. 必须先把模具“拿”过来importMyCardfrom'@/components/MyCard.vue';</script>

3、index.js配置路由并访问

{path:'/courseListView',name:'CourseListView',component:CourseListView},

然后访问地址：
http://localhost:5173/courseListView# courseListView是自定义的路径名

具名插槽示例

机制：
有具名的内容填到具名插槽内
没具名的内容填到默认插槽内

1、创建components/MultiMyCard.vue

<template><divclass="card-box"><!-- 坑1：头部区域 --><divclass="card-header"><slotname="header">默认标题</slot></div><!-- 坑2：正文区域（默认插槽） --><divclass="card-body"><slot></slot></div><!-- 坑3：底部操作区 --><divclass="card-footer"><slotname="footer">默认按钮</slot></div></div></template><stylescoped>.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;}</style>

2、创建views/MultiMyCardShowViews.vue

<template><divclass="page-container"><h2>今日推荐课程</h2><divclass="card-list"><!-- 第一张卡片 --><MultiMyCard><!-- 填坑1：头部 --><template#header>🚀 Vue3 零基础入门</template><!-- 填坑2：正文（默认坑，直接写内容） --><p>带你从环境搭建一路学到项目实战，新手必学！</p><!-- 填坑3：底部按钮 --><template#footer><buttonclass="btn-primary">99元 立即抢购</button></template></MultiMyCard><!-- 第二张卡片 --><MultiMyCard><!-- 填坑1：头部 --><template#header>☕ Java 进阶架构</template><!-- 填坑2：正文 --><p>深入理解微服务、高并发与底层源码，架构师进阶之路。</p><!-- 填坑3：底部按钮 --><template#footer><buttonclass="btn-primary">199元 立即抢购</button></template></MultiMyCard></div></div></template><scriptsetup>// 1. 引入我们刚才写的组件importMultiMyCardfrom'@/components/MultiMyCard.vue';</script><stylescoped>.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;}</style>

3、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}from'vue'// 最简组合式函数exportfunctionuseCounter(init=0){// 响应式数字constcount=ref(init)// 操作方法constadd=()=>count.value++constsub=()=>count.value--// 对外暴露变量和方法return{count,add,sub}}

2、创建views/CounterTestView.vue

<template><div><p>数字：{{ count }}</p><button@click="add">+1</button><button@click="sub">-1</button></div></template><scriptsetup>// 导入组合式函数import{useCounter}from'../composables/useCounter'// 调用一次，生成独立的计数器逻辑const{count,add,sub}=useCounter(10)</script>

3、index.js配置路由并访问

{path:'/counterTestView',name:'CounterTestView',component:CounterTestView},

组合式函数和普通函数的区别

订购