本文章用于記錄前端學習中遇到的瑣碎問題及解決方法，歡迎大家一起學習補充~

前端如何獲取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?屬性的值更新為子組件傳遞過來的新值。