Vue中的emit是指子組件向父組件傳遞數(shù)據(jù)的一種機(jī)制。當(dāng)子組件中需要將一些信息告知父組件時(shí)，就可以通過(guò)emit方法將這些信息傳遞給父組件。
Vue.component("child-component", {
template: ``,
methods: {
sendMessage() {
this.$emit("message", "Hello, parent!");
}
}
});在上面的代碼中，我們定義了一個(gè)名為child-component的組件，并在其中定義了一個(gè)名為sendMessage的方法。當(dāng)用戶(hù)點(diǎn)擊元素時(shí)，這個(gè)方法就會(huì)被觸發(fā)。
sendMessage方法中使用了Vue實(shí)例的$emit方法來(lái)將"Hello, parent!"這個(gè)信息傳遞給父組件。$emit方法需要接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是事件名稱(chēng)，第二個(gè)參數(shù)是要傳遞的數(shù)據(jù)。
在父組件中，我們需要注冊(cè)child-component組件，并使用@message監(jiān)聽(tīng)子組件的message事件。當(dāng)子組件觸發(fā)了message事件，handleMessage方法就會(huì)被調(diào)用。
Vue.component("parent-component", {
template: `{{message}}
`,
data() {
return {
message: ''
}
},
methods: {
handleMessage(data) {
this.message = data;
}
}
});在上面的代碼中，我們?cè)趐arent-component組件中注冊(cè)了child-component組件，并將handleMessage方法綁定到了message事件上。當(dāng)子組件觸發(fā)message事件時(shí)，handleMessage方法就會(huì)被調(diào)用，并將傳遞過(guò)來(lái)的數(shù)據(jù)賦值給message。
使用emit方法并不局限于傳遞簡(jiǎn)單的字符串或數(shù)字類(lèi)型數(shù)據(jù)。它可以傳遞任何類(lèi)型的JavaScript對(duì)象。
this.$emit("message", {
name: "Lucas",
age: 25,
skills: ["Vue", "React", "Angular"]
});上面的代碼中我們傳遞了一個(gè)JavaScript對(duì)象，其中包含了name、age和skills這三個(gè)屬性。在父組件中，我們同樣可以通過(guò)handleMessage方法接收這個(gè)對(duì)象并對(duì)其進(jìn)行處理。
另外，在使用$emit方法時(shí)，我們可以不傳遞第二個(gè)參數(shù)。這時(shí)父組件接收到的數(shù)據(jù)將會(huì)是undefined。
this.$emit("message");總結(jié)一下，emit方法是Vue組件中實(shí)現(xiàn)父子組件間通信的重要機(jī)制。通過(guò)emit方法，子組件可以向父組件傳遞數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。