已解決430363個問題，去搜搜看，總會有你想問的

vue 同一個組件被一個頁面調用兩次，狀態沖突

首頁猿問 vue...

JavaScript

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

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

查看完整描述

1 回答

拉風的咖菲貓

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

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

反對回復 2019-01-02

關注

舉報

0/150

提交

取消