在vue開發過程中，我們經常會使用組件傳值來實現頁面之間的數據傳遞。其中，一種常見的方式是使用子組件向父級組件傳遞數據，這時就需要使用到vue中的$emit方法。但是，有時候我們會發現$emit方法并沒有起到作用，本篇文章將分析并解決這一問題。

下面我們來看一個例子：

<template>
<div>
<child-component @send-something="getValue"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
methods: {
getValue(val) {
console.log(val);
}
}
}
</script>

在其中，我們引入了一個子組件ChildComponent，當ChildComponent中觸發了send-something事件時，把值傳到父級組件中，由父級組件調用getValue方法對這個值進行處理。

// 子組件ChildComponent
<template>
<div @click="send">click me</div>
</template>
<script>
export default {
methods: {
send() {
this.$emit('send-something', 'hello');
}
}
}
</script>

在子組件中，我們在點擊事件中使用$emit('send-something', 'hello')觸發了send-something事件，這里我們需要注意，vue中需要將事件名稱改為kebab-case的格式，即使用'-'連接。

然而，當我們運行這段代碼后卻發現，父級組件并沒有成功的接收到子組件傳遞的數據。這時候我們可以使用vue-devtools來輔助調試，可以看到點擊ChildComponent組件后觸發的send-something事件并沒有傳遞出去，也就是$emit并沒有起到作用。

經過調試我們發現，這是因為在子組件中使用this.$emit傳遞事件時，只能傳遞固定的字符串形式的事件名稱，而無法動態的傳遞變量。因此，正確的實現方式如下：

<template>
<div @click="send">click me</div>
</template>
<script>
export default {
props: {
eventName: {
type: String,
default: 'send-something'
}
},
methods: {
send() {
this.$emit(this.eventName, 'hello');
}
}
}
</script>

通過在子組件中添加一個props屬性eventName，限定eventName的類型為String，并默認為send-something，再在$emit方法中使用this.eventName動態的傳遞事件名稱，從而解決了$emit無效的問題。