在 Vue 中,emit 是一種自定義事件傳遞方式。當我們需要在父子組件中傳遞參數時,可以使用 emit 方法。 在 Vue 的官方文檔中,emit 的格式如下:
this.$emit('eventName', params);
其中,eventName 是我們自定義的事件名,params 是傳遞的參數。通過 emit 方法傳遞參數,我們可以實現父子組件之間的數據通訊。
在 Vue 中,我們可以在子組件中通過監聽 emit 事件來獲取父組件傳遞過來的參數。具體來說,我們可以使用 v-on 指令來監聽自定義事件。在子組件中,我們可以這樣寫:
Vue.component('child-component', {
template: `
<div>
<h2>{{label}}</h2>
<button v-on:click="emitEvent">點擊我</button>
</div>
`,
props: ['label'],
methods: {
emitEvent: function () {
this.$emit('custom-event', 123);
}
}
})
在這個例子中,我們在子組件中定義了一個 emit 方法。當我們點擊按鈕時,emit 方法會被觸發,同時會傳遞參數 123 給父組件。
在父組件中,我們可以通過 v-on 指令來監聽子組件的自定義事件。具體來說,我們可以這樣寫:
Vue.component('parent-component', {
template: `
<div>
<h1>{{title}}</h1>
<child-component :label="label" v-on:custom-event="onCustomEvent"></child-component>
</div>
`,
data: function () {
return {
title: '我是父組件',
label: '我是子組件的 label'
};
},
methods: {
onCustomEvent: function (params) {
console.log('我是父組件,我收到了子組件傳遞過來的參數:', params);
}
}
})
在這個例子中,我們在父組件中通過 v-on 指令來監聽子組件的自定義事件。當子組件觸發自定義事件時,父組件中的 onCustomEvent 方法會被觸發,同時會獲取到子組件傳遞過來的參數。
總結起來,emit 是 Vue 中自定義事件的一種傳遞方式,我們可以通過 $emit 來觸發自定義事件并傳遞參數,也可以通過 v-on 指令來監聽子組件的自定義事件并獲取參數,從而實現父子組件之間的數據通訊。
下一篇vue 跨域訪問