Vue3組件(18)組件間傳值/共享的方法的匯總

方法集合

父組件.png

目前只能想到這些了欠雌,對了像棘,還有事件總線這類的就不考慮了稽亏。

props + emit

最基礎(chǔ)的方式,適用于 父組件和子組件之間的直接傳值缕题,多用于基礎(chǔ)控件截歉,比如input、el-input烟零、el-select這類瘪松。
比較基礎(chǔ)不多介紹了。

Vuex

老牌的狀態(tài)管理方式瓶摆,各種組件之間各種傳值凉逛,好吧專業(yè)術(shù)語叫做狀態(tài)管理性宏。

使用方法呢群井,其實就是一層窗戶紙,捅破了大家就都知道了毫胜,這里不介紹了书斜,可以看我的文集:
http://www.reibang.com/nb/49384194

indexedDB

這個不是前端存儲嗎?也可以共享數(shù)據(jù)酵使?

當(dāng)然可以了荐吉,只是沒有響應(yīng)性而已。
使用方式可以參考這里:http://www.reibang.com/p/607c01749168
當(dāng)然也可以用其他第三方的封裝類來管理口渔。

Vuex挺強(qiáng)大的样屠,只是有個小問題,不支持狀態(tài)的保存,比如一刷新狀態(tài)就沒了注盈,更不用提關(guān)掉網(wǎng)頁等操作了分尸。

那么如果我想長期保存狀態(tài)呢向瓷?這時候就需要用到前端存儲,比如localStrage或者indexedDB栗柒。

Vuex + 前端存儲,二者配合起來就更強(qiáng)大了知举。

indexedDB的特點(diǎn)是可以長期保存數(shù)據(jù)瞬沦,而且容量很大,那么是不是可以把字典數(shù)據(jù)存進(jìn)來呢雇锡?然后讓state來加載這些數(shù)據(jù)逛钻,這樣的話就不用每次(打開頁面)都到后端去獲取數(shù)據(jù)。
既快捷又減輕后端的壓力遮糖。

provide 和 inject 的注入方法

這個還是很簡單粗暴的绣的,目前正在研究,應(yīng)該可以實現(xiàn)代替 Vuex 的數(shù)據(jù)狀態(tài)管理方案欲账。

因為Vuex不太適合Vue3的環(huán)境屡江,應(yīng)該可以有替代方案了。
在這里探討了一下:http://www.reibang.com/p/25b8e8a7e319
當(dāng)然還很粗糙赛不,距離完善還有很長的路要走惩嘉。

后端API

這個家伙怎么也來了?跑錯片場了吧踢故。

其實不然文黎,可能大家早就在默默的使用這種方式了。

比如博客網(wǎng)站殿较,打開一篇博文耸峭,看著興起寫了一個討論發(fā)了出去。

這時候討論組件會把討論數(shù)據(jù)提交給后端淋纲,后端處理后返回給前端劳闹,討論組件得到確認(rèn)回復(fù)后,是不是要告訴討論列表組件:你有新的消息洽瞬,請注意更新一下本涕。

這是討論組件就會向后端API申請新的討論列表數(shù)據(jù)。

這樣看來伙窃,討論數(shù)據(jù)是不是經(jīng)由后端API傳遞給另一個組件的呢菩颖?

好吧,有點(diǎn)杠的味道为障,但是原理就是這樣的晦闰,我是想告訴大家放祟,不要限制思維,發(fā)散一下總不會有錯呻右。

可能有人會說舞竿,你這是古老的思路,完全不懂現(xiàn)在的前端開發(fā)的思想窿冯,還骗奖。。醒串。执桌。

好吧,還是上面的例子芜赌,稍微改一下流程仰挣。

討論組件向后端API提交數(shù)據(jù)的同時,把討論數(shù)據(jù)共享給列表組件缠沈,列表組件不管三七二十膘壶,先顯示了再說。

這樣用戶可以在第一時間在討論列表里面看到自己發(fā)的討論信息洲愤。

但是這還沒有完颓芭,后端有沒有成功保存討論呢?

討論組件得到后端的回復(fù)之后柬赐,還要做一下處理:
1亡问、如果成功了,告知討論組件新的討論數(shù)據(jù)的ID
2肛宋、如果失敗了州藕,告知討論組件,剛才的那條討論數(shù)據(jù)沒成功酝陈,你得通知用戶床玻。

討論組件也要做相應(yīng)的處理。
1沉帮、如果得到成功的通知锈死,設(shè)置新的ID,為刪除操作提供ID遇西,否則刪除操作咋辦馅精。
2严嗜、如果得到失敗的通知粱檀,要告知用戶失敗了,并且問問用戶漫玄,是否重發(fā)茄蚯。

然后還有個小問題压彭,如果討論非常激烈,又有幾個新的討論出現(xiàn)了渗常,那么什么時候更新這些討論壮不?是讓用戶手動更新,還是自動更新皱碘,還是討論組件提交數(shù)據(jù)后询一,后端自動判斷是否有新的討論,如果有癌椿,一起返回給前端健蕊?

好像跑題了。

總之要設(shè)計好一個應(yīng)用踢俄,各種細(xì)節(jié)問題缩功,用戶交互問題,都是需要考慮的都办。果然跑題了嫡锌。。琳钉。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末势木,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子歌懒,更是在濱河造成了極大的恐慌跟压,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件歼培,死亡現(xiàn)場離奇詭異震蒋,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)躲庄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進(jìn)店門查剖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人噪窘,你說我怎么就攤上這事笋庄。” “怎么了倔监?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵直砂,是天一觀的道長。 經(jīng)常有香客問我浩习,道長静暂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任谱秽,我火速辦了婚禮洽蛀,結(jié)果婚禮上摹迷,老公的妹妹穿的比我還像新娘。我一直安慰自己郊供,他們只是感情好峡碉,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著驮审,像睡著了一般鲫寄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上疯淫,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天塔拳,我揣著相機(jī)與錄音,去河邊找鬼峡竣。 笑死靠抑,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的适掰。 我是一名探鬼主播颂碧,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼类浪!你這毒婦竟也來了载城?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤费就,失蹤者是張志新(化名)和其女友劉穎诉瓦,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體力细,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡睬澡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了眠蚂。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片煞聪。...
    茶點(diǎn)故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖逝慧,靈堂內(nèi)的尸體忽然破棺而出昔脯,到底是詐尸還是另有隱情,我是刑警寧澤笛臣,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布云稚,位于F島的核電站,受9級特大地震影響沈堡,放射性物質(zhì)發(fā)生泄漏静陈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一踱蛀、第九天 我趴在偏房一處隱蔽的房頂上張望窿给。 院中可真熱鬧,春花似錦率拒、人聲如沸崩泡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽角撞。三九已至,卻和暖如春勃痴,著一層夾襖步出監(jiān)牢的瞬間谒所,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工沛申, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留劣领,地道東北人。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓铁材,卻偏偏與公主長得像尖淘,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子著觉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Vuex是針對Vue設(shè)計的一套狀態(tài)管理模式饼丘,現(xiàn)在已經(jīng)發(fā)展到了第四個版本趁桃。一開始很是向往,感覺都第四版了肄鸽,應(yīng)該更完善...
    自然框架閱讀 9,545評論 0 7
  • 父組件向子組件傳值 組件實例定義方式卫病,注意:一定要使用props屬性來定義父組件傳遞過來的數(shù)據(jù) 使用v-bind或...
    xlystar閱讀 360評論 0 0
  • 前言 您將在本文當(dāng)中了解到,往網(wǎng)頁中添加數(shù)據(jù),從傳統(tǒng)的dom操作過渡到數(shù)據(jù)層操作,實現(xiàn)同一個目標(biāo),兩種不同的方式....
    itclanCoder閱讀 25,803評論 1 12
  • 除了使用 Vuex 方法外,vue 提供了各種各樣的組件間通信的方案典徘。文章整理一下父子組件忽肛、兄弟組件、祖先后代組件...
    前端一菜鳥閱讀 403評論 0 2
  • 父組件向子組件傳值 組件實例定義方式烂斋,注意:一定要使用props屬性來定義父組件傳遞過來的數(shù)據(jù) 使用v-bind或...
    誩先生閱讀 553評論 0 3