连接接口的俩用法

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