在Vue中,可以使用$emit
方法來觸發事件,從而在父組件中監聽并處理該事件。以下是一個簡單的示例:
<!-- ChildComponent.vue -->
<template>
<button @click="handleClick">Click me</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('custom-event', 'Hello from child component');
}
}
}
</script>
<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent @custom-event="handleCustomEvent" />
<p>{{ message }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: ''
};
},
methods: {
handleCustomEvent(data) {
this.message = data;
}
}
}
</script>
在上面的代碼中,子組件ChildComponent
中的按鈕被點擊時,會觸發handleClick
方法,然后使用$emit
方法觸發名為custom-event
的自定義事件,并傳遞一個字符串參數。在父組件ParentComponent
中,監聽了子組件的custom-event
事件,并調用handleCustomEvent
方法來處理事件傳遞的參數。最終會在頁面上顯示出Hello from child component
。
這就是在Vue中通過$emit
和自定義事件來實現組件間通信的基本方法。