Vue是一套構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 Web 用戶界面的漸進(jìn)式框架。其中最重要的功能之一就是比較方便的父子組件通信。Vue 的父子組件間通信主要是靠傳遞 prop 進(jìn)行數(shù)據(jù)流動(dòng)和通過(guò) $emit 觸發(fā)事件，從而實(shí)現(xiàn)父組件向子組件傳遞數(shù)據(jù)或子組件向父組件觸發(fā)事件的目的。

$emit 是Vue中非常常用的一種事件傳遞方式，它可以讓子組件直接向父組件傳值。在子組件的某個(gè)操作上時(shí)，觸發(fā)一個(gè)事件，然后父組件監(jiān)聽(tīng)這個(gè)事件，從而產(chǎn)生相應(yīng)的操作。

下面是一個(gè) $emit 傳值的示例代碼：

子組件中：
<template>
<button @click="$emit('childClick', 123)">傳值給父組件</button>
</template>
<script>
export default {
name: 'Child',
}
</script>
父組件中：
<template>
<div>
<child @childClick="handleChildClick"></child>
<p v-if="message">{{message}}</p>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
name: 'Parent',
components: {
Child,
},
data() {
return {
message: ''
}
},
methods: {
handleChildClick(data) {
this.message = data
}
}
}
</script>

子組件中動(dòng)態(tài)生成由 $emit 得到的數(shù)據(jù)，并將其傳遞到父組件中。父組件中給子組件一個(gè) @childClick 事件監(jiān)聽(tīng)器，事件觸發(fā)后執(zhí)行 handleChildClick 方法，利用傳入的參數(shù) data 改變當(dāng)前message值，并渲染值變化。

總結(jié)一下，通過(guò)使用 $emit 事件可以方便地進(jìn)行父子組件間通信，可以通過(guò)事件來(lái)觸發(fā)相應(yīng)的操作，從而實(shí)現(xiàn)組件間數(shù)據(jù)或事件的相互傳遞。