您好,登錄后才能下訂單哦!
這篇文章主要介紹Vue中父子組件數(shù)據(jù)傳遞的方式有哪些,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
當(dāng)我們?cè)跁?shū)寫(xiě) vue
組件的時(shí)候,也許可能會(huì)用到數(shù)據(jù)傳遞;將父組件的數(shù)據(jù)傳遞給子組件,有時(shí)候也需要通過(guò)子組件去事件去觸發(fā)父組件的事件;
每當(dāng)我們遇到這樣的需求的時(shí)候,我們總是會(huì)想到有三種解決辦法:
通過(guò) props
的方式向子組件傳遞(父子組件)
vuex
進(jìn)行狀態(tài)管理(父子組件和非父子組件) vuex
非父子組件的通信傳遞 Vue Event Bus
,使用Vue的實(shí)例,實(shí)現(xiàn)事件的監(jiān)聽(tīng)和發(fā)布,實(shí)現(xiàn)組件之間的傳遞。
后來(lái)再逛社區(qū)的時(shí)候我又發(fā)現(xiàn)了還有第四種傳遞方式, inheritAttrs
+ $attrs
+ $listeners
附上原文鏈接Vue2.4版本中新添加的 attrs
以及 listeners
屬性使用 和 Vue.js最佳實(shí)踐(五招讓你成為Vue.js大師)
基本是大部分的公司或者項(xiàng)目都是用前面兩種,我司也不例外;好像曾經(jīng)在官方文檔看到過(guò), vuex
適合用在大型的項(xiàng)目中。第三種方式我曾在我的畢設(shè)中用到過(guò),其他地方我好像目前是沒(méi)有看到,當(dāng)時(shí)只有一個(gè)功能需要在兄弟組件之間傳遞數(shù)據(jù),用 vuex
的話,大材小用,另外還需要時(shí)間成本。所以我選擇了 Vue Event Bus
;最后一種方式的話,我目前還沒(méi)有看到過(guò)在項(xiàng)目的應(yīng)用。但是我個(gè)人覺(jué)得既然有這個(gè) api
那肯定是有他存在的道理。不然它存在還有何意義的??如果有需求我個(gè)人覺(jué)得可以嘗試用一用;擁抱變化,擁抱機(jī)會(huì)
工作之后發(fā)現(xiàn),碰到 bug
有時(shí)候常規(guī)的方式,并不一定是最好的。跳出常規(guī)思維,跳出常規(guī)方式去解決問(wèn)題,可能會(huì)更加好。常規(guī)方法能夠解決問(wèn)題但是未免有些臃腫。在實(shí)踐的采坑中體會(huì)更有意思
inheritAttrs
+ $attrs
+ $listeners
inheritAttrs
:默認(rèn)是 true
我的解釋就是:沒(méi)有被子組件繼承的父組件屬性,不會(huì)當(dāng)做特性展示在子組件根元素上面。說(shuō)起來(lái),聽(tīng)起來(lái)好像有些拗口,看截圖看代碼你就明白了
inheritAttrs :false
inheritAttrs :false
c='ture1.png'>
官方解釋:默認(rèn)情況下父作用域的不被認(rèn)作 props
的特性綁定 ( attribute bindings
) 將會(huì)“回退”且作為普通的 HTML
特性應(yīng)用在子組件的根元素上。當(dāng)撰寫(xiě)包裹一個(gè)目標(biāo)元素或另一個(gè)組件的組件時(shí),這可能不會(huì)總是符合預(yù)期行為。通過(guò)設(shè)置 inheritAttrs
到 false
,這些默認(rèn)行為將會(huì)被去掉。而通過(guò) (同樣是 2.4 新增的) 實(shí)例屬性 $attrs
可以讓這些特性生效,且可以通過(guò) v-bind
顯性的綁定到非根元素上。
$attrs
我的解釋就是:存放沒(méi)有被子組件繼承的的數(shù)據(jù)對(duì)象;看看圖
官方文檔解釋:包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí),這里會(huì)包含所有父作用域的綁定 (class 和 style 除外),并且可以通過(guò) v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級(jí)別的組件時(shí)非常有用。
$listeners
我的理解就是:子組件可以觸發(fā)父組件的事件(不需要用什么那些麻煩的vuex或者一個(gè)空的 Vue
實(shí)例作為事件總線,或者又是什么 vm.$on
)
官方文檔解釋:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用。
以上是“Vue中父子組件數(shù)據(jù)傳遞的方式有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。