首頁猿問 vue...

vue 同一個組件被一個頁面調用兩次，狀態(tài)沖突

JavaScript

桃花長相依 2018-12-13 15:15:51

vue商城類項目，首頁有每天秒殺和每周秒殺，都需要使用倒計時，倒計時已經封裝成公共的組件，但是一個頁面同時調用這個倒計時組件導致狀態(tài)沖突后臺返回的數(shù)據是每周秒殺和每天秒殺的開始時間，結束時間，和當前時間，請問如何處理才能導致狀態(tài)不會沖突有必要對組件進行復制形成兩個完全相同的組件嗎？

查看完整描述

1 回答

拉風的咖菲貓

TA貢獻1995條經驗獲得超2個贊

首先，復用性很高的東西，封裝成公共組件的思路是對的
但是狀態(tài)沖突的成因是因為公共的倒計時組件，將原本應該屬于倒計時組件獨立的東西（比如剩余時間），都暴露在了全局
建議不復制完全相同的組件，而是通過組件的props或者ref的應用，對倒計時內的狀態(tài)進行修改，并且將這些狀態(tài)封裝在組件內部，而不是暴露到全局
處理倒計時組件時，將后臺返回數(shù)據綁定到組件上去，而不是通過組件主動去獲取時間。這樣，調用倒計時組件的頁面上就可以定義每一個倒計時的剩余時間，而不至于因為倒計時讀取同一個狀態(tài)，而混在一起。