vue使用$emit時(shí),父組件無法監(jiān)聽到子組件的事件實(shí)例
更新時(shí)間：2018年02月26日 14:55:44 作者：楓似
下面小編就為大家分享一篇vue使用$emit時(shí),父組件無法監(jiān)聽到子組件的事件實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue使用$emit時(shí)，父組件無法監(jiān)聽到子組件的事件的原因是$emit傳入的事件名稱只能使用小寫，不能使用大寫的駝峰規(guī)則命名
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:ee="incrementTotal"></button-counter>
<button-counter v-on:eEvent="incrementTotal"></button-counter>
<child ref="cmpSelect" v-on:ee="incrementTotal" option-api-url="/api/admin/cms/cmsCategory/getOptions.do"></child>
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('ee', this.counter);//有效
this.$emit('eEvent', this.counter);//無效，不能使用大寫的駝峰規(guī)則命名
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: '點(diǎn)擊下面的按鈕'
},
methods: {
incrementTotal: function (b) {
this.total = b;
}
}
})
</script>
以上這篇vue使用$emit時(shí),父組件無法監(jiān)聽到子組件的事件實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近一直在做 Vue項(xiàng)目代碼層面上的優(yōu)化，寫文章是很easy的事情，今天小編給大家分享Vue.js 父子組件通信的十種方式，感興趣的的朋友跟隨小編一起看看吧2018-10-10
這篇文章主要介紹了vue中的代理proxy，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
vue實(shí)現(xiàn)大文件分片上傳與斷點(diǎn)續(xù)傳到七牛云
這篇文章介紹了vue實(shí)現(xiàn)大文件分片上傳與斷點(diǎn)續(xù)傳到七牛云的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
解決vue加scoped后就無法修改vant的UI組件的樣式問題
這篇文章主要介紹了解決vue加scoped后就無法修改vant的UI組件的樣式問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Nginx部署前端Vue項(xiàng)目的步驟、常見問題與解決方案
在現(xiàn)代Web開發(fā)中,Vue.js成為前端開發(fā)者構(gòu)建單頁應(yīng)用的熱門框架,Nginx以其高性能和穩(wěn)定性,成為部署Vue項(xiàng)目的理想選擇,這篇文章主要介紹了Nginx部署前端Vue項(xiàng)目的步驟、常見問題與解決方案,需要的朋友可以參考下2024-09-09
Vue 的組件作用域都是孤立的，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。必須使用特定的方法才能實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞。下面這篇文章主要給大家介紹了關(guān)于vue中各組件之間傳遞數(shù)據(jù)的方法示例，需要的朋友可以參考學(xué)習(xí)。2017-07-07
這篇文章主要介紹了vue3頭像上傳組件功能,用到了自定義組件v-model的雙向綁定，使用axios + formData 上傳文件，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue cli3適配所有端方案的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
詳解element-ui 組件el-autocomplete使用踩坑記錄
最近使用了el-autocomplete組件，本文主要介紹了element-ui 組件el-autocomplete使用踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03