請問下為啥在模板里，子組件調用this.$emit，父組件觸發不了方法呢？我debugger看events里注冊了那個事件然而并沒有觸發是為啥勒https://jsfiddle.net/BiggerKa...點擊預覽點擊點我啊沒有出現alert的效果
2 回答
滄海一幻覺
TA貢獻1824條經驗 獲得超5個贊
事件名稱不允許用駝峰式，fiddle里看不出來，在瀏覽器里Vue會發出警告中斷執行，模板和觸發的方法名稱都改成小寫就可以成功，親測可行。
// template<child-com @handle-tip="handleTip" :param="childParam"></child-com>// script
methods: {
handleTip: function () {
this.$emit('handle-tip', 'haha')
}
}
蝴蝶刀刀
TA貢獻1801條經驗 獲得超8個贊
事件名
不同于組件和 prop，事件名不存在任何自動化的大小寫轉換。而是觸發的事件名需要完全匹配監聽這個事件所用的名稱。舉個例子，如果觸發一個 camelCase 名字的事件：
this.$emit('myEvent')
則監聽這個名字的 kebab-case 版本是不會有任何效果的：
<my-component v-on:my-event="doSomething"></my-component>
不同于組件和 prop，事件名不會被用作一個 JavaScript 變量名或屬性名，所以就沒有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件監聽器在 DOM 模板中會被自動轉換為全小寫 (因為 HTML 是大小寫不敏感的)，所以 v-on:myEvent 將會變成 v-on:myevent——導致 myEvent 不可能被監聽到。
因此，我們推薦你始終使用 kebab-case 的事件名。
添加回答
舉報
0/150
提交
取消