写项目时一些疑惑:组件间的通信、createDownloadUrl和DownloadUrl,ArrayBuffer与Blob等
目录
一、[vite] Internal server error: No known conditions for "./lib/locale/lang/zh-cn" specifier in "element-plus" package
二、可以用vue和JS的代码片段,但是用不了html的代码片段
三、meta是什么东西
四、为什么代码保持一致,但是时间轴始终为初始值
五、“==”两边一定要空格
六、组件间的通信
1 传方法(被调用组件Ref)
2 方法的回调:emit
七、query和params的区别
八、前后端的的数据传递?
流程:
九、为什么给子组件传数据,有时候用“:”有时候不用
十、什么是calc(100vh-41px)
十一、ArrayBuffer与Blob
1 ArrayBuffer
2 Blob
十二、预览其他文件比如说zip文件时为什么同时提供了createDownloadUrl和DownloadUrl,它们有什么区别?
1 二者的核心区别
2 为何需要两个 URL?
3.流程
4 tips
十三、调接口都需要async await,Confirm.js中的回调函数
1. proxy.Confirm
2 异步操作 (async)
3 API 请求 (proxy.Request)
4 处理请求结果
5 成功后操作
十四、为什么是v-if="opType == 1“,而不是opType.value==1呢
一、[vite] Internal server error: No known conditions for "./lib/locale/lang/zh-cn" specifier in "element-plus" package
解决方法:将lib换成es或者[lib换成dist,去掉lang[lib换成dist,去掉lang]()
二、可以用vue和JS的代码片段,但是用不了html的代码片段
解决方法:将文件名换成html.json[将文件名换成html.json]()
三、meta是什么东西
meta是路由对象的一部分,通常用于存储与某个路由相关的元数据,例如访问权限、页面标题、图标等。这些信息不会影响路由的本身功能,但可以作为额外的数据,方便在应用中使用。
比如说:
meta: {
needLogin: true,
menuCode: "main"
},
四、为什么代码保持一致,但是时间轴始终为初始值
<img
:src="
avatar && avatar != ''
? avatar
: `${proxy.globalInfo.avatarUrl}${userId}?${timestamp}`
"
v-if="userId"
/>
换成其他图片timestamp就会变化,换成别的图片就始终保持初始值,
- timestamp 在每次头像更新时都被更新,并且它是一个 动态值,这样可以有效避免浏览器缓存。
- 图片文件的大小可能影响缓存机制的行为,尤其是图片较大的时候,浏览器可能会优先选择从缓存中加载。
五、“==”两边一定要空格
六、组件间的通信
1 传方法(被调用组件Ref)
调用组件
调用组件通过 ref 获取到被调用组件的实例,然后直接调用被调用组件中的方法。ref 允许调用组件通过引用直接访问被调用组件中的公共方法或属性。
<!-- 调用组件 -->
<template>
<被调用组件 ref="被调用组件Ref"></被调用组件>
</template><script setup>
import { ref } from "vue";
const 被调用组件Ref=ref()
const 其他方法=(父组件的数据)=>{
被调用组件Ref.value.方法(父组件的数据)
}
</script>
被调用组件
被调用组件中定义了一个方法,并通过 defineExpose 暴露给调用组件。这样,调用组件就能通过 ref 访问被调用组件的该方法。
<!-- 被调用组件 -->
<template>
</template>
<script setup>
import { ref } from "vue";
const 方法=(传来的参数)=>{
//TODO,处理传来的参数
}
defineExpose({方法:方法})
</script>
2 方法的回调:emit
emit 用于被调用组件向调用组件传递数据或事件,调用组件通过监听被调用组件发出的事件来接收数据。相比于 ref,emit 方式是事件驱动的,通常用于松散耦合的场景。
父组件
调用组件通过 @方法 监听子组件发出的事件,并处理子组件传递的数据。
<!-- 父组件 -->
<template>
<子组件 @方法="父组件的方法"></子组件>
</template><script setup>
import { ref } from "vue";
const 调用组件需要的数据=ref()
// 子组件触发事件时,父组件执行此方法来接收数据
const 父组件的方法=(子组件传来的数据)=>{
const {父组件得到的数据} =子组件传来的数据
父组件需要的数据.value=父组件得到的数据
}
const
</script>
子组件
子组件通过 defineEmits 触发事件,父组件可以通过监听该事件来接收被调用组件传递的数据。
<!-- 子组件 -->
<template>
<div></div>
</template><script setup>
const emit