当前位置: 首页 > news >正文

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

相关文章:

  • C++十进制与十六进制
  • 20个常用的初级Java笔试题及其参考答案
  • 这几天调试VR,几个渲染效果不错
  • 【随身WIFI】随身WiFi Debian系统优化教程
  • Sql刷题日志(day3)
  • Vue基础(5)_事件修饰符
  • 软件工程知识体系全面梳理
  • libevent的各个基本函数的使用
  • STM32+dht11+rc522+jq8400的简单使用
  • Minecraft盔甲机制详解(1.9之后)
  • 文件的加密与解密学习笔记
  • MIR-2025 | 多模态知识助力机器人导航:从复杂环境到高效路径规划
  • 2025年4月16日华为笔试第三题300分
  • 数据结构与算法-顺序表专题
  • 【裁员感想】
  • 禁用USB接口的电脑管理软件推荐
  • 移植firefly core-1126-jd4官方sdk源码到其他rv1126板卡时 kernel启动中失去响应问题解决
  • 2025年特种设备安全管理 A 证考试全解析
  • 力扣 797. 所有可能的路径
  • 2025宽带避坑指南:百兆、千兆、万兆到底怎么选
  • 华侨城A:一季度营收53.63亿元,净利润亏损14.19亿元
  • 葡萄牙、西班牙发生大范围停电
  • “90后”樊鑫履新乌兰察布市察右中旗副旗长人选
  • 人社部:我国劳动力市场潜力足,韧性强
  • 加总理:目前没有针对加拿大人的“活跃威胁”
  • 仲裁法修订草案二审稿拟增加规定规制虚假仲裁