vue.js 中的事件對象包含有關事件的屬性和方法，可通過事件處理程序函數訪問。這些屬性包括事件類型、目標元素和原始事件對象。事件對象還提供方法來阻止默認行為和事件冒泡。此外，可以通過 detail 屬性向自定義事件傳遞數據，從而允許在組件之間傳播和接收復雜信息。
Vue 中的事件對象
Vue.js 中的事件對象是一個特殊的對象，它包含與事件相關的各種屬性和方法。當一個元素觸發事件時，Vue 將創建一個事件對象并將其傳遞給事件處理程序。
事件對象屬性
以下是一些常見的事件對象屬性：
type：觸發事件的類型，例如 “click” 或 “keyup”。
target：觸發事件的元素。
currentTarget：當前正在處理事件的元素。
event：原始瀏覽器事件對象。
detail：自定義事件數據。
事件對象方法
事件對象還提供了以下方法：
preventDefault()：阻止默認瀏覽器行為。
stopPropagation()：阻止事件冒泡到祖先元素。
stopImmediatePropagation()：立即停止事件冒泡和傳播。
使用事件對象
為了在 Vue 中使用事件對象，您可以在事件處理程序函數中訪問它。例如：
<code><button>點擊我</button>
<script>
export default {
methods: {
handleClick(event) {
console.log(event.type); // "click"
console.log(event.target); // HTMLButtonElement
event.preventDefault();
}
}
}
</script></code>
登錄后復制
在上面的示例中，handleClick 函數提供了一個事件對象作為其參數。您可以使用此對象訪問事件的類型、目標元素等信息。
自定義事件數據
您可以通過 detail 屬性向自定義事件傳遞數據。例如：
<code><my-component><button>觸發事件</button>
</my-component><script>
export default {
methods: {
emitEvent() {
this.$emit('custom-event', { message: '你好，世界！' });
},
handleEvent(event) {
console.log(event.detail.message); // "你好，世界！"
}
}
}
</script></code>
登錄后復制
這允許您將任意數據與事件一起傳播和接收。
