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

相关推荐
神探小白牙13 分钟前
eCharts 多系列柱状图增加背景图
javascript·ecmascript·echarts
女生也可以敲代码19 分钟前
AI时代下的50道前端开发面试题:从基础到大模型应用
前端·面试
ZhengEnCi26 分钟前
M5-markconv自定义CSS样式指南 📝
前端·css·python
IT_陈寒44 分钟前
SpringBoot自动配置的坑差点让我加班到天亮
前端·人工智能·后端
xingpanvip44 分钟前
星盘接口开发文档:星相日历接口指南
android·开发语言·前端·css·php·lua
@PHARAOH1 小时前
WHAT - GitLens supercharged 插件
前端
TT模板1 小时前
苹果cms整合西瓜播放器XGplayer插件支持跳过片头尾
前端·html5
Wect2 小时前
React 性能优化精讲
前端·react.js·性能优化
追风筝的人er2 小时前
SpringBoot+Vue3 企业考勤如何处理法定假期?节假日方案、调休补班与工作日判断链路拆解
前端·vue.js·后端
无敌的黑星星3 小时前
Java8 CompletableFuture 实战指南
linux·前端·python