最近我遇到了一個(gè)很奇怪的問題，在我的Vue項(xiàng)目中，change事件不起作用了。

我在父組件傳遞了一個(gè)綁定了value的子組件，并監(jiān)聽了子組件的change事件，但是當(dāng)我在子組件中改變value的值，父組件并沒有觸發(fā)相應(yīng)的change事件。

// 子組件
<template>
<input type="text" v-model="value" @change="handleChange">
</template>
<script>
export default {
props: {
value: String
},
methods: {
handleChange() {
this.$emit("change", this.value);
}
}
}
</script>
// 父組件
<template>
<ChildComponent v-model="msg" @change="handleMsgChange"></ChildComponent>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";
export default {
components: {
ChildComponent
},
data() {
return {
msg: "hello world"
}
},
methods: {
handleMsgChange(value) {
console.log(value)
}
}
}
</script>

經(jīng)過一番排查，我發(fā)現(xiàn)原來是因?yàn)槲以谧咏M件中使用了v-model來綁定value的值，而在v-model內(nèi)部自動(dòng)綁定的是input事件，而不是change事件，所以我把@change改為了@input，然后問題就解決了。

雖然這個(gè)問題看似很小，但是卻卡了我很長時(shí)間，認(rèn)真查找原因，便可以更好的避免這樣的問題。