這篇文章給大家介紹如何通過$emit()和$dispatch()實現子組件向父組件傳值，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創新互聯長期為1000多家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為畢節企業提供專業的網站建設、成都做網站，畢節網站改版等技術服務。擁有十載豐富建站經驗和眾多成功案例,為您定制開發。

自定義組件是一個開發者編寫的組件，使用起來和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 class="child-demo"> <text>我是子組件一count:{{compCount}}</text> <input type="button" onclick='addHandler' value='add'></input> </div> </template> <script> export default { props: ['count'], data(){ return{ compCount:this.count } }, addHandler(){ this.compCount ++ this.$emit('emitEvt',{ count:this.compCount }) } } </script>`

方法二 子組件調用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 class="child-demo"> <text>我是子組件二num:{{compNum}}</text> <input type="button" onclick='delHandler' value='del'></input> </div> </template> <script> export default { props: ['num'], data(){ return{ compNum:this.num } }, delHandler(){ this.compNum -- this.$dispatch('dispathEvt',{ num:this.compNum }) } } </script>`

關于如何通過$emit()和$dispatch()實現子組件向父組件傳值就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網站名稱：如何通過$emit()和$dispatch()實現子組件向父組件傳值
分享網址：http://www.yijiale78.com/article24/pceoje.html

成都網站建設公司_創新互聯，為您提供標簽優化、網站收錄、響應式網站、電子商務、網站策劃、商城網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯