共計 1287 個字符,預計需要花費 4 分鐘才能閱讀完成。
這篇文章給大家介紹如何通過 $emit() 和 $dispatch() 實現子組件向父組件傳值,內容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
自定義組件是一個開發者編寫的組件,使用起來和 Native 一樣,最終按照組件的 template 來渲染;同時開發起來又和頁面一樣,擁有 ViewModel 實現對數據、事件、方法的管理。自定義組件也叫子組件,因為它不能獨立存在,需要被引入到頁面上才能生效。子組件避免一個頁面的布局龐大、臃腫,而且使代碼可讀性好、易維護。
子組件如何向父組件傳值呢?比如當子組件對數據進行改造后,如何把最終數據交給父組件呢?主要有兩種方法:
子組件通過 $emit() 觸發在節點上綁定的自定義事件來執行父組件的方法。
子組件通過 $dispatch() 觸發自定義事件,父組件通過 $on() 監控自定義事件的觸發。
解決方案方法一
子組件通過 $emit() 觸發在節點上綁定的自定義事件來執行父組件的方法,如下例子中實現了如何將子組件中的 count 值傳遞到父組件上。子組件定義了 emitEvt 事件(父組件中引用時,需要添加 on 前綴),子組件在調用 $emit() 時,攜帶了 count 參數,父組件在響應事件時,便可獲取到參數值。
!–**** 父組件 – ` import name= comp1 src= ./comp1.ux /import template
div text 我是父組件 count:{{fcount}} /text comp1 count= {{fcount}} onemit-evt= emitEvt /comp1 /div /template script export default {private:{ fcount:20}, emitEvt(evt){this.fcount = evt.detail.count} } /script `
!– 子組件 comp1 —
` template
div >
方法二 子組件調用 childVm.$dispath() 完成向上傳遞。子組件通過 $dispatch() 觸發自定義事件,父組件通過 $on() 監控自定義事件的觸發,自定義事件中控制 num 的變化,父組件中通過 evt.detail 獲取子組件中的 num 的值賦值給父組件。
!– 父組件 —
` import name= comp1 src= ./comp1.ux /import template
div text 我是父組件 fnum:{{fnum}} /text comp2 num= {{fnum}} /comp2 /div /template script export default {private:{ fnum:20}, onInit(){ this.$on( dispathEvt ,this.dispathEvt) }, dispathEvt(evt){this.fnum = evt.detail.num} } /script `
!– 子組件 comp2 —
` template
div >
關于如何通過 $emit() 和 $dispatch() 實現子組件向父組件傳值就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。