0%

Vuejs元件02-emit事件

這邊接續著上一篇”Vuejs元件01”的文章,繼續做筆記。

emit 向外層傳遞事件

我們前面是利用props將資料由外層串入內層,但是,我們還是有時候需要將資料由內層傳到外層,
此時,我們要用到的技術就是emit

以上這個修改完的範例你可以看到,我們在button-counter元件的methods中的incrementCounter事件的emit,多新增了將button-counter元件自己的counter成員屬性值傳遞出去,此時因為increment觸發了外部的incrementTotal事件,所以,incrementTotal也就接收到了button-counter元件的counter成員屬性值,
所以,我們就可以在incrementTotal中,新增參數newNumber,而這參數就是button-counter元件counter成員屬性值,
並將這個newNumber參數與app物件自身的cash成員互相做加總,最後,再把加總的結果呈現在畫面中。

注意emit傳出去的資料型別是否正確

你要特別注意一下,我們在emit傳出的counter的值,有特別用Number轉型成數字型別,如果你沒這麼做它會直接傳字串型別的值出去,這樣加總的結果就不會是我們想要的囉。