vue复习

连接接口的俩用法

一、父子通信props

props只读不能修改,父传子用ref动态,info静态,子接收用defineProps([""])

二、父子通信自定义事件

子传父

父:@xxx等于一个函数,下面定一个函数,接收两个参数(param1,param2)

子:上面点击触发一个函数,再用函数defineEimts直接修改。 $eimt里的数据

三、全局事件总线

下载mitt

书写全局事件的ts文件

引用mitt,定义一个$的对象,使用mitt方法,最后暴露出去

在子文件中引用ts文件的对象方法,使用onMounted的进行挂载,使用该挂载函数,$bus.on接受车

在另一个子组件中引用ts对象方法,$bus.emit发送车

四、省事的通信方式v-model

父:定义两个要改变的参数,并且使用v-model

子:分别使用defineProps只读呈现参数,defineEmits自定义接收事件变化

五、elementplus传样式之useAttrs

父:引用plus中的icon

引用自己封装的组件,并向子传入样式等

子:调用useAttrs方法,定义个对象,上面应用这个对象用于接收父传过来的样式

六、通信方式ref和$parent

子传父

父:使用ref实例,定义父亲的💰,并且定义函数找儿子借10块,所以要获取儿子的💰

子:使用ref定义自己的💰或者方法,默认父是获取不到的所以用defineExpose暴露出去

父传子

父:使用defineExpose暴露出💰

子:使用parent传父参,parent代表父的数据

七、通信方式之provide和inject

爷爷:使用provide定义个key,使用key传参

孙子:所以inject接收key,这样直接通过key获取到爷爷里面的数据

注意,因为两者使用的是同一个对象,所以当孙子发生改变时,爷爷会发生改变。当爷爷发生改变时,孙子也会发生改变

八、通信方式之pinia选择式API

新建pinia仓库文件

创建大仓库,使用createPinia方法,暴露出去

main.js引入仓库,使用仓库

创建小仓库,配置对象方法

子:引用仓库,获取小仓库对象,仓库调用自己的方法修改数据

九、通信方式之pinia组合式API

创建小仓库定义组合式API

子:获取这个小仓库的对象,使用小仓库对象的方法进行仓库的数据修改

要是想要计算,在小仓库里使用computed,务必返回函数,注意这里ref定义多个数

使用小仓库的方法即可完成计算

十、通信方式之插槽

默认插槽

子:slot为默认插槽

父:引用子后,在子标签中插入文字即可分开子组件

具名插槽

子:slot内要加入名字

父:v-slot:a或者#a都可以为具体名字,插入插槽

作用域插槽

子:接受父的数据后遍历渲染出来,中间用到作用域插槽,:row和index将参数传给父组件

父:定义数据,将参数传给子组件

v-slot接收参数,如果完成则绿不完成则红,渲染出来

登录功能实现步骤:

把基础页面做出来,v-model绑定表单,定义数据获取提交表单,项目需要使用pinia管理,需要定义仓库,大仓库中放入模块user小仓库,在小仓库内引入pinia方法,创建user的仓库,在里面仓库,异步,getter方法,在异步内写入登录接口,并将其搭配标准的数据类型,数据类型需要单独封装,如果成功=200,ok,如果失败则返回失败。

在页面文档中。引用接口,使用try方法。对成功和失败给予提示跳转和返回,提示需要引用element plus,加载效果,也需要引用element plus。

获取时间上午好,中午好,晚上好,需要单独封装暴露,使用本身佩戴的Date方法,计算小时,满足条件即上午好,中午好晚上好,最后再提示当中引用应用函数。

相关推荐
A923A1 分钟前
【从零开始学 React | 第四章】useEffect和自定义Hook
前端·react.js·fetch·useeffect
ZC跨境爬虫5 分钟前
批量爬取小说章节并优化排版(附完整可运行脚本)
前端·爬虫·python·自动化
ZC跨境爬虫8 分钟前
海南大学交友平台登录页开发实战day4(解决python传输并读取登录信息的问题)
开发语言·前端·python·flask·html
来一颗砂糖橘11 分钟前
pnpm:现代前端开发的高效包管理器
前端·pnpm
前端摸鱼匠11 分钟前
Vue 3 的defineProps编译器宏:详解<script setup>中defineProps的使用
前端·javascript·vue.js·前端框架·ecmascript
木斯佳12 分钟前
前端八股文面经大全: 美团财务科技前端一面 (2026-04-09)·面经深度解析
前端·实习面经·前端初级
天外天-亮13 分钟前
Vue2.0 + jsmind:开发思维导图
javascript·vue.js·jsmind
LIO15 分钟前
React 零基础入门,一篇搞懂核心用法(适合新手)
前端·react.js
TeamDev30 分钟前
JxBrowser 8.18.2 版本发布啦!
java·前端·跨平台·桌面应用·web ui·jxbrowser·浏览器控件
netkiller-BG7NYT30 分钟前
yoloutils - Openclaw Agent Skill
前端·webpack·node.js