本文章用于记录前端学习中遇到的琐碎问题及解决方法，欢迎大家一起学习补充~

前端如何获取UUID发送至后端？

1. 命令行下载uuid库

npm install uuid

2. 工程导入uuid库

import { v4 as uuidv4 } from "uuid";

3. 使用方法生成uuid实例

const UUID = uuidv4();

4. 后端接收

public class Test{@JsonProperty("UUID") // 声明与JSON对象对应的字段名private String uuid;
}

MyBatis无法将java.util.UUID类与数据库的varchar类实现映射，因此建议使用String类来接收uuid 

前端如何获取TimeStamp？对应Java的哪一类？

// 时间戳
const orderTime = +new Date();

可以使用Long类来接收时间戳，数据库的时间戳字段也是用long类型进行映射即可

是对象，也是Map

js中不止Map()类实例可以实现key/value的映射，直接使用Object对象也可以实现key/value映射。

// 计算属性，根据UUID分组订单
const groupedOrders = computed(() => {const groups = {};props.shopList.forEach((order) => {if (!groups[order.UUID]) {groups[order.UUID] = [];}groups[order.UUID].push(order);});return groups;
});

如这个函数中，gruops作为对象，可以直接使用[keyName]访问对应的value，且可以对key对应的value进行赋值等操作。

要删除对应的key/value使用delete关键字即可：

delete classifiedList.value[UUID];

想要获取classifiedList的长度？可以曲线救国：

Object.entries(obj) 
// 返回一个包含对象所有可枚举属性的键值对数组，所以这个方法会返回键值对的总数。

 使用Object.entries获取键值对数组，键值对数组的长度即为classifiedList的长度。

Object.keys(obj)

  或者使用Object.keys()获取键的数组，键数组的长度即为classifiedList的长度 

监听窗口被关闭事件

created(async () => {window.addEventListener('beforeunload',()=>{//... 销毁前逻辑})
})

window对象监听'beforeunload'事件即可。 

参考文章：vue 监听浏览器关闭或刷新事件_vue监听浏览器关闭-CSDN博客

el-table中如何获取每行的对象？

v-slot：

在Vue.js中，v-slot指令用于定义具名插槽或默认插槽，并可以用来接收作用域插槽的数据。当你看到v-slot="scope"这样的语法，它通常指的是一个作用域插槽（Scoped Slot）的用法，其中scope是一个变量名，用于访问父组件传递给插槽的数据。

作用域插槽允许子组件向父组件传递数据，并在父组件的模板中控制这些数据的渲染方式。scope对象包含了子组件传递给插槽的所有属性和方法，这些属性和方法可以在插槽的内容中。

<el-table :data="users" border style="width: 100%" />

如向table表格中传入users数组，要访问表格每行对应的user对象，则可以使用v-slot插槽：

<template v-slot="scope"><el-button type="danger" @click="deleteUser(scope)">删除</el-button>
</template>

scope对象中包含了如下信息：

$index: 2
cellIndex: 3
column: {order: '', id: 'el-table_8_column_32', type: 'default', property: undefined, align: 'is-center', …}
expanded: false
row: Proxy(Object) {userPhone: 'admin', userPassword: 'admin', userName: 'admin', userType: 'admin'}
store: {ns: {…}, assertRowKey: ƒ, updateColumns: ƒ, scheduleLayout: ƒ, isSelected: ƒ, …}
_self: {uid: 369, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …}
[[Prototype]]: Object

如可以通过scope.row访问每行对应的user对象，通过scope.$index访问每行对象对应的数组index 

JSON参数后端接收的严格要求：

后端若想接收JSON数据，首先需要进行相关配置，同时只能使用@RequestBody和对象来承接JSON，不能自动映射，也不能使用@RequestParam进行映射。

vue的父子组件之间进行通讯？

需求：点击事件弹出的对话框为一个dialog.vue子组件。父组件向子组件传入visible=true的属性值时，对话框可正常弹出。但是父组件传递给子组件的属性值是单向数据流，子组件中不能直接修改父组件visible=false以关闭对话框。如何解决？

解决：

如果想在用户点击取消按钮时修改 visible 的值以关闭对话框，你需要通过触发一个事件来通知父组件修改 visible 的值，因为 Vue 的 props 是单向数据流，子组件不应该直接修改传入的 props。

子组件中加入代码：

<template>  <!-- ...（其他代码保持不变）... -->  <template #footer>  <div>  <!-- 修改取消按钮的事件处理 -->  <el-button @click="handleCancel">取消</el-button>  </div>  </template>   
</template>  <script setup>  
import { defineEmits } from 'vue';  const emit = defineEmits(['update:visible']);  function handleCancel() {  // 触发自定义事件，通知父组件关闭对话框  emit('update:visible', false);  
}  
</script>

父组件中加入代码：

<modyfiy-dialog :visible="visible"  @update:visible="visible = $event" />

解析：

defineEmits 是 Vue 3 中用于在 <script setup> 模式下声明组件可以发出哪些事件的函数。这有助于提供更好的类型检查和更清晰的组件接口。在 <script setup> 中使用，通常位于文件的顶部。它接受一个字符串数组或一个对象，用于定义组件可以发出的事件。

update:visible 的命名含义是：子组件希望通过触发update这个事件来更新父组件中名为 visible 的 prop 值。update:visible 这种命名方式在 Vue 中用于实现父子组件之间的双向数据绑定，允许子组件更新父组件中的 prop 值。虽然 Vue 3 对 .sync 的处理方式有所改变，但这种命名约定仍然被保留并用于相同的目的。

共有两种声明方式：

1. 字符串数组定义

const emit = defineEmits(['update:visible']);

2. 对象方式定义

const emit = defineEmits({  'update:visible': (value) => typeof value === 'boolean',  
});

这种方式更加详细和灵活。它不仅声明了事件，还为每个事件提供了一个验证函数。在这个例子中，'update:visible' 事件的验证函数检查传递的值是否为布尔类型。如果尝试触发该事件并传递一个非布尔值，Vue 将在控制台中发出警告，指出参数不符合验证函数的要求。

emit 函数用于在 Vue 3 组件中触发自定义事件并传递必要的参数。emit 允许子组件向父组件发送消息，这是实现父子组件通信的一种重要方式。

function handleCancel() {  emit('update:visible', false);  
}

调用handleCancel函数便可以利用emit触发 'update:visible' 事件，并传递 false 作为参数。

@update:visible="visible = $event"

这段代码 @update:visible="visible = $event" 表示监听一个名为 update:visible 的事件，并在该事件被触发时执行一段代码。具体来说， 当 update:visible 事件被触发时，父组件会执行 visible = $event 这个表达式。这里，visible 是父组件中的一个响应式数据属性，而 $event 包含了子组件触发事件时传递的值。这个表达式的执行会将父组件中的 visible 属性的值更新为子组件传递过来的新值。