写项目时一些疑惑：组件间的通信、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