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

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

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

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

• 子組件通過$emit()觸發(fā)在節(jié)點上綁定的自定義事件來執(zhí)行父組件的方法。

• 子組件通過$dispatch()觸發(fā)自定義事件，父組件通過$on()監(jiān)控自定義事件的觸發(fā)。

解決方案

方法一

子組件通過$emit()觸發(fā)在節(jié)點上綁定的自定義事件來執(zhí)行父組件的方法，如下例子中實現(xiàn)了如何將子組件中的count值傳遞到父組件上。子組件定義了emitEvt事件（父組件中引用時，需要添加on前綴），子組件在調用$emit()時，攜帶了count參數(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>`

<!-- 子組件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()觸發(fā)自定義事件，父組件通過$on()監(jiān)控自定義事件的觸發(fā)，自定義事件中控制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()實現(xiàn)子組件向父組件傳值就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。