Vue父子組件數(shù)據(jù)傳遞方法總結(jié)（附代碼）

當(dāng)我們在書寫 vue 組件的時(shí)候，也許可能會(huì)用到數(shù)據(jù)傳遞；將父組件的數(shù)據(jù)傳遞給子組件，有時(shí)候也需要通過子組件去事件去觸發(fā)父組件的事件；

每當(dāng)我們遇到這樣的需求的時(shí)候，我們總是會(huì)想到有三種解決辦法：

通過 props 的方式向子組件傳遞(父子組件)

vuex 進(jìn)行狀態(tài)管理(父子組件和非父子組件) vuex

非父子組件的通信傳遞 Vue Event Bus ，使用Vue的實(shí)例，實(shí)現(xiàn)事件的監(jiān)聽和發(fā)布，實(shí)現(xiàn)組件之間的傳遞。

后來再逛社區(qū)的時(shí)候我又發(fā)現(xiàn)了還有第四種傳遞方式， inheritAttrs + $attrs + $listeners

附上原文鏈接Vue2.4版本中新添加的 attrs 以及 listeners 屬性使用 和 Vue.js最佳實(shí)踐（五招讓你成為Vue.js大師）

基本是大部分的公司或者項(xiàng)目都是用前面兩種，我司也不例外；好像曾經(jīng)在官方文檔看到過， vuex 適合用在大型的項(xiàng)目中。第三種方式我曾在我的畢設(shè)中用到過，其他地方我好像目前是沒有看到，當(dāng)時(shí)只有一個(gè)功能需要在兄弟組件之間傳遞數(shù)據(jù)，用 vuex 的話，大材小用，另外還需要時(shí)間成本。所以我選擇了 Vue Event Bus ；最后一種方式的話，我目前還沒有看到過在項(xiàng)目的應(yīng)用。但是我個(gè)人覺得既然有這個(gè) api 那肯定是有他存在的道理。不然它存在還有何意義的？？如果有需求我個(gè)人覺得可以嘗試用一用；擁抱變化，擁抱機(jī)會(huì)

工作之后發(fā)現(xiàn)，碰到 bug 有時(shí)候常規(guī)的方式，并不一定是最好的。跳出常規(guī)思維，跳出常規(guī)方式去解決問題，可能會(huì)更加好。常規(guī)方法能夠解決問題但是未免有些臃腫。在實(shí)踐的采坑中體會(huì)更有意思

inheritAttrs + $attrs + $listeners

inheritAttrs ：默認(rèn)是 true

我的解釋就是：沒有被子組件繼承的父組件屬性，不會(huì)當(dāng)做特性展示在子組件根元素上面。說起來，聽起來好像有些拗口，看截圖看代碼你就明白了

inheritAttrs :false

inheritAttrs :false

c='ture1.png'>

官方解釋：默認(rèn)情況下父作用域的不被認(rèn)作 props 的特性綁定 ( attribute bindings ) 將會(huì)“回退”且作為普通的 HTML 特性應(yīng)用在子組件的根元素上。當(dāng)撰寫包裹一個(gè)目標(biāo)元素或另一個(gè)組件的組件時(shí)，這可能不會(huì)總是符合預(yù)期行為。通過設(shè)置 inheritAttrs 到 false ，這些默認(rèn)行為將會(huì)被去掉。而通過 (同樣是 2.4 新增的) 實(shí)例屬性 $attrs 可以讓這些特性生效，且可以通過 v-bind 顯性的綁定到非根元素上。

$attrs

我的解釋就是：存放沒有被子組件繼承的的數(shù)據(jù)對(duì)象；看看圖

官方文檔解釋：包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級(jí)別的組件時(shí)非常有用。

$listeners

我的理解就是：子組件可以觸發(fā)父組件的事件（不需要用什么那些麻煩的vuex或者一個(gè)空的 Vue 實(shí)例作為事件總線，或者又是什么 vm.$on )

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

vue嵌套路由與404重定向使用詳解

Vue項(xiàng)目全局配置微信分享步驟說明

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com