針對同一元件內較多不同模組進行元件封裝,實現程式碼優化

需求:
主頁中有不同的頻道,各個頻道互不干擾,各自展示自己的文章資料
思路:
1、找到資料介面

2、封裝請求方法

3、在元件中請求獲取資料，將資料儲存到 data 中

4、模板繫結展示

根據不同的頻道載入不同的文章列表，

• 有一個 list 陣列，用來儲存資料列表
• 檢視 a 頻道：請求獲取資料，讓 list = a 頻道文章資料
• 檢視 b 頻道：請求獲取資料，讓 list = b 頻道文章資料
• 檢視 c 頻道：請求獲取資料，讓 list = c 頻道文章資料

問題出現:
1,需要宣告很多不同的頻道名稱,2,切換頻道後重復發起資料請求;

優化解決方案:

準備多個 list 陣列，每個頻道對應一個，檢視哪個頻道就把資料往哪個頻道的列表陣列中存放，這樣的話就不會導致覆蓋問題

一一宣告頻道太麻煩,因此:

封裝一個文章列表元件,然後在頻道列表把文章列表遍歷出來

,通過元件間傳值的方式,把頻道物件傳給文章列表元件;文章列表元件使用頻道物件中的id來獲取文章列表資料;之後把文章列表元件在頻道列表中遍歷出來;

最終:

具體操作:
父元件home/index,其中channels變數儲存了所有的頻道資訊 由channels遍歷生成的article-list子元件接收父元件傳來的每項channel資料, 根據channel中的引數獲取資料,然後儲存到list中,通過不斷上拉/下拉重新整理,將資料不斷push/unshift到list陣列中,(由於article-list子元件一直存在,所以資料一致被儲存),然後遍歷list生成子元件article-item,來進行每一項的渲染,該子元件接收父元件傳來的article資料,該資料來源於遍歷出來的list的每一項,在article-item根據article傳來的資料渲染出具體的值,由於每個頻道都是單獨存在的,所以list的值也不同,互相切換互不影響,點選哪個頻道,該頻道發起請求,一次請求,只要不離開父元件home,就一直存在;

實現:

//home父元件
 <van-tab
        v-for="channel in channels"
        :key="channel.id"
        :title="channel.name"
      >
        <!-- 頻道文章列表 -->
        <article-list :channel="channel"></article-list>
      </van-tab>
//article-list文章列表元件
		<article-item
          v-for="(article, index) in list"
          :key="index"
          :article="article"
        ></article-item>
//article-list具體項元件進行渲染具體項

點選不同 頻道時,儲存的資料也不同,同時點選過的資料也會被儲存下來;