Vue是一個(gè)流行的前端框架，它使用組件化的方式實(shí)現(xiàn)頁(yè)面的構(gòu)建。典型的Vue組件包括模版、組件實(shí)例以及一些組件相關(guān)的HTML、CSS和JavaScript代碼。在Vue中，組件實(shí)例之間經(jīng)常需要進(jìn)行通信，而使用emit和on是Vue中實(shí)現(xiàn)組件通信的標(biāo)準(zhǔn)方式之一。在實(shí)際開發(fā)中，我們可能需要使用emit向父組件傳遞一些數(shù)據(jù)，但是可能會(huì)碰到一些問題，如何傳遞組件在列表中的下標(biāo)呢？

Vue組件庫(kù)Element UI中的select組件是一個(gè)典型的需要傳遞下標(biāo)的場(chǎng)景。在下面的代碼中，我們可以看到每一個(gè)option都有一個(gè)value屬性和一個(gè)label屬性，但是我們需要傳遞被選中的option的下標(biāo)。這時(shí)候就需要使用emit觸發(fā)一個(gè)事件，在事件的回調(diào)函數(shù)中傳遞當(dāng)前選中的下標(biāo)。

...
methods: {
handleSelect(index) {
this.$emit('select', index);
}
}

在上述代碼中，我們?cè)趆andleSelect方法中調(diào)用$emit方法觸發(fā)了一個(gè)select事件，并將當(dāng)前選中的下標(biāo)作為參數(shù)傳遞給了父組件。此時(shí)在父組件中監(jiān)聽select事件，并且可以得到選中的下標(biāo)：

...
methods: {
handleSelect(index) {
console.log(index);
}
}

在上述代碼中，我們?cè)趍y-select組件中使用$emit將當(dāng)前選中的下標(biāo)傳遞給了父組件。在父組件中我們監(jiān)聽了select事件，并且將得到選中的下標(biāo)信息。

通過上述代碼的演示，我們可以看到使用emit向父組件傳遞當(dāng)前組件在列表中的下標(biāo)是非常簡(jiǎn)單的，只需要在$emit方法中傳遞當(dāng)前下標(biāo)信息即可。但是需要注意的是，在循環(huán)中使用組件時(shí)，需要保證每個(gè)組件的key值不相同，否則會(huì)出現(xiàn)組件重復(fù)渲染的問題。