首頁猿問 vue...

vue 子組件emit沒效果各位有什么建議？

JavaScript

溫溫醬 2019-08-21 13:48:58

請問下為啥在模板里，子組件調用this.$emit，父組件觸發(fā)不了方法呢？我debugger看events里注冊了那個事件然而并沒有觸發(fā)是為啥勒https://jsfiddle.net/BiggerKa...點擊點我啊沒有出現(xiàn)alert的效果

查看完整描述

2 回答

守候你守候我

TA貢獻1802條經驗獲得超10個贊

事件名稱不允許用駝峰式，fiddle里看不出來，在瀏覽器里Vue會發(fā)出警告中斷執(zhí)行，模板和觸發(fā)的方法名稱都改成小寫就可以成功，親測可行。//template//scriptmethods:{handleTip:function(){this.$emit('handle-tip','haha')}}

反對回復 2019-08-21

qq_遁去的一_1

TA貢獻1725條經驗獲得超8個贊

事件名不同于組件和prop，事件名不存在任何自動化的大小寫轉換。而是觸發(fā)的事件名需要完全匹配監(jiān)聽這個事件所用的名稱。舉個例子，如果觸發(fā)一個camelCase名字的事件：this.$emit('myEvent')則監(jiān)聽這個名字的kebab-case版本是不會有任何效果的：不同于組件和prop，事件名不會被用作一個JavaScript變量名或屬性名，所以就沒有理由使用camelCase或PascalCase了。并且v-on事件監(jiān)聽器在DOM模板中會被自動轉換為全小寫(因為HTML是大小寫不敏感的)，所以v-on:myEvent將會變成v-on:myevent——導致myEvent不可能被監(jiān)聽到。因此，我們推薦你始終使用kebab-case的事件名。

反對回復 2019-08-21