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

相关推荐
还有多久拿退休金4 小时前
我用 Three.js 造了个 3D 漫步世界,角色走路像喝醉了——以及我是怎么修好的
前端·vue.js
SZLSDH4 小时前
场景适配论 | 数字孪生IOC建设中渲染技术与智能体能力的协同逻辑
前端·数据库·ai·数字孪生·数据可视化·智能体
LJA648444 小时前
为什么 AI 时代更需要配置化组件库
vue.js
_按键伤人_5 小时前
二、从零搭建本地 RAG 知识库
前端·llm·ai编程
_按键伤人_5 小时前
一、理解 RAG:从概念到实践
前端·llm·ai编程
lichenyang4535 小时前
鸿蒙聊天 Demo 练习 04:聊天历史本地缓存,实现消息记录持久化
前端
名字都不重要何况昵称5 小时前
canvas 元素拾取
前端·canvas
从文处安5 小时前
「前端何去何从」React Router:让单页应用有多页的体验
前端·react.js
Lkstar5 小时前
Vue Router 进阶:导航守卫、动态路由与懒加载,源码级理解
前端
ricardo19735 小时前
# Tree Shaking 深度解析:为什么你的代码没被摇掉?
前端·面试