Vue Select 組件是 Vue.js 的一個常用組件，它提供了一個可自定義的下拉框選擇框。使用該組件，我們可以很方便地實現下拉框多選、異步加載、遠程搜索等常見功能。在 Vue Select 中，我們經常需要清空已經選擇的選項，這時就需要用到清空事件。

清空事件是指在 Vue Select 中，清空所有已選擇的選項的操作。該事件通常在用戶需要重置表單、或者需要重新選擇選項時用到。在 Vue Select 中，我們可以使用 v-model 指令綁定選中的值，并使用 clear 方法清空選項。

<template>
<div>
<v-select v-model="selected" @clear="clearSelection">
<option v-for="option in options" :value="option">{{ option }}</option>
</v-select>
<button @click="clearSelection">清空選擇</button>
</div>
</template>
<script>
export default {
data() {
return {
selected: [],
options: ['選項1', '選項2', '選項3']
};
},
methods: {
clearSelection() {
this.selected = [];
}
}
};
</script>

在上述代碼中，我們使用 v-select 組件來渲染下拉框，并使用 v-model 指令將選中的值與 selected 變量進行雙向數據綁定。我們還定義了一個 clearSelection 方法，用來清空選項。在 v-select 組件中，我們監聽了組件的 clear 事件，并將其綁定到 clearSelection 方法上。當用戶點擊清空按鈕或者下拉框的 X 按鈕時，該事件將會被觸發，執行 clearSelection 方法，從而清空已選項。

需要注意的是，如果我們的下拉框允許用戶輸入自定義的值，而非只能選擇預定義的選項，那么在清空時還需要將輸入框的值清空。且如果想要重置表單時，需要將表單的其他輸入值也一并清空。此時，我們可以使用 Vue 的實例方法 $refs 來獲取其下層組件，并操作其值。

<template>
<div>
<form ref="form">
<v-select v-model="selected" ref="select">
<option v-for="option in options" :value="option">{{ option }}</option>
</v-select>
</form>
<button @click="resetForm">重置表單</button>
</div>
</template>
<script>
export default {
data() {
return {
selected: [],
options: ['選項1', '選項2', '選項3']
};
},
methods: {
clearSelection() {
this.selected = [];
this.$refs.select.search = ''; // 清空輸入框的值
},
resetForm() {
this.clearSelection();
this.$refs.form.reset(); // 重置表單
}
}
};
</script>

在上述代碼中，我們定義了一個表單，并在表單中渲染了一個 v-select 組件。我們使用 $refs 獲取了該組件，并在 clearSelection 方法中清空了組件的選項和輸入框的值。在 resetForm 方法中，我們調用了 clearSelection 方法，再使用 $refs 獲取到表單元素，調用了其內置的 reset 方法，從而重置了表單。

總之，Vue Select 的清空事件是一個很方便的功能，我們可以通過綁定 clear 事件和定義 clearSelection 方法，來實現清空選項的操作。此外，在清空時需要注意將輸入框的值一并清空，以及在重置表單時清空其他輸入框的值。