如何通過(guò)$emit()和$dispatch()實(shí)現(xiàn)子組件向父組件傳值

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

創(chuàng)新互聯(lián)長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為畢節(jié)企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都做網(wǎng)站，畢節(jié)網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

自定義組件是一個(gè)開(kāi)發(fā)者編寫(xiě)的組件，使用起來(lái)和Native一樣，最終按照組件的<template>來(lái)渲染；同時(shí)開(kāi)發(fā)起來(lái)又和頁(yè)面一樣，擁有ViewModel實(shí)現(xiàn)對(duì)數(shù)據(jù)、事件、方法的管理。自定義組件也叫子組件，因?yàn)樗荒塥?dú)立存在，需要被引入到頁(yè)面上才能生效。子組件避免一個(gè)頁(yè)面的布局龐大、臃腫，而且使代碼可讀性好、易維護(hù)。

子組件如何向父組件傳值呢？比如當(dāng)子組件對(duì)數(shù)據(jù)進(jìn)行改造后，如何把最終數(shù)據(jù)交給父組件呢？主要有兩種方法：

子組件通過(guò)$emit()觸發(fā)在節(jié)點(diǎn)上綁定的自定義事件來(lái)執(zhí)行父組件的方法。
子組件通過(guò)$dispatch()觸發(fā)自定義事件，父組件通過(guò)$on()監(jiān)控自定義事件的觸發(fā)。

解決方案

方法一

子組件通過(guò)$emit()觸發(fā)在節(jié)點(diǎn)上綁定的自定義事件來(lái)執(zhí)行父組件的方法，如下例子中實(shí)現(xiàn)了如何將子組件中的count值傳遞到父組件上。子組件定義了emitEvt事件（父組件中引用時(shí)，需要添加on前綴），子組件在調(diào)用$emit()時(shí)，攜帶了count參數(shù)，父組件在響應(yīng)事件時(shí)，便可獲取到參數(shù)值。

`<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>`

`<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>`

方法二子組件調(diào)用childVm.$dispath()完成向上傳遞。子組件通過(guò)$dispatch()觸發(fā)自定義事件，父組件通過(guò)$on()監(jiān)控自定義事件的觸發(fā)，自定義事件中控制num的變化，父組件中通過(guò)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>`

`<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>`

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

網(wǎng)站名稱：如何通過(guò)$emit()和$dispatch()實(shí)現(xiàn)子組件向父組件傳值
分享網(wǎng)址：http://bm7419.com/article24/pceoje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站收錄、響應(yīng)式網(wǎng)站、電子商務(wù)、網(wǎng)站策劃、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容