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方法,计算小时,满足条件即上午好,中午好晚上好,最后再提示当中引用应用函数。

相关推荐
崔庆才丨静觅3 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60614 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了4 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅4 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅5 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅5 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment5 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅5 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊5 小时前
jwt介绍
前端
爱敲代码的小鱼6 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax