$emit是Vue實例中用來觸發(fā)自定義事件的方法,也是用來在組件之間傳遞數據的常見方式之一。它接收兩個參數:第一個參數為事件名稱,第二個參數為要傳遞給事件處理函數的數據。
下面是一個簡單的示例,展示了如何在子組件中通過$emit方法來觸發(fā)一個自定義事件,從而向父組件傳遞數據:
// 子組件
<template>
<button @click="handleClick">點擊傳遞數據</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('custom-event', 'hello')
}
}
}
</script>
// 父組件
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
methods: {
handleCustomEvent(data) {
console.log(data) // 輸出"hello"
}
},
components: {
ChildComponent
}
}
</script>
在上面的例子中,子組件中的handleClick方法會觸發(fā)custom-event事件,并且將字符串"hello"作為參數傳遞給該事件。在父組件中,我們通過在子組件標簽上綁定@custom-event事件,來監(jiān)聽該事件。當該事件被觸發(fā)時,父組件中的handleCustomEvent方法會被調用,并且可以訪問到傳遞給該事件的數據。
上一篇vue js app
下一篇c json多層