延續上一篇：建立分頁元件與modal元件

寫code之前，先拆解的流程進行開發
w3
-切版
-登入功能
-進入產品列表
-get
-post
-bs5 Modal功能
-put
-多圖上傳新增功能
-delete
//w4
-建立一個元件(ex:分頁元件)
-分頁元件匯出
-分頁元件匯入到vue檔案中
-(區域)元件註冊
-建立元件，還有版型
-匯入元件
-把元件的資料匯入
-元件與根元件的方法串接

options API

• Options API 是以程式碼的性質來分割程式碼，例如有 3 個函式各自用來實現不同功能，但如果它們都是 methods 方法，就全都一起寫在 methods 屬性裏。程式碼較難閱讀，因為不是按功能邏輯來放程式碼，以致在比較大型的專案上，閱讀時就要跳來跳去，也比較耗時。

Composition API

• Composition API 是以邏輯功能來分割程式碼，像是寫原生 JavaScript 一樣，我們會把實現同樣功能的程式碼寫在附近

建立一個pagination元件(分頁元件)

• 建立一個pagination元件(分頁元件) ->
• 分頁元件匯出 ->
  
• vue檔案中匯入分頁元件 ->
  
• 區域元件註冊
  

-建立元件，還有bootstrap分頁版型，並把遠端的分頁資料存入

• 貼上bootstrap的分頁版型到元件的template ->
  
• 調整這個原來的api網址
  
• 測試有分頁的分api並查看分頁回傳資料
  
• 新增分頁資料集，新增分頁參數預設值為第一頁
  
• 將遠端取得得分頁資料也存入上層元件data中page （本圖片中的pages都改成page 圖片寫錯了）
  
• 區域元件要取得上層元件分頁的資料需要用props並把上層元件pages作為字串傳入props陣列中
  

整理一下區域元件中的分頁html模板資料

• 測試元件是否有收到資料
  
• 運用v-for將分頁資料渲染在元件上
  

點擊頁面active or disabled功能(Disabled and active states)

• 提醒：
  • v-bind -綁定 Class
  • 綁定樣式，參考文件 Class 与 Style 绑定
    可以透過 :class 的物件綁定並動態切換 Class，物件的屬性為 className，後方的值是表達式結果，如果為真值則會套用該 className。

範例重點：

:class 可以使用動態切換 className
"{rotate: isTransform}" 物件中的前者為 className 名稱，後者為判斷式，當為真值時則啟用前者的 className
可以透過動態切換 isTransform 的 true or false 來決定是否套用 rotate

• v-bind 綁定class
  
• 運用api取的分頁資料去判斷active or dusabled ->
  
• 現在我們要外層getProduct的方法傳到內層元件中使用，才能觸法事件讓分頁元件不管點擊哪一個頁面都能顯示相應的頁面上的產品列表(方法1:這裡先用props方式傳遞)
  
  or
• 現在我們要外層getProduct的方法傳到內層元件中使用，才能觸發事件讓分頁元件不管點擊哪一個頁面都能顯示相應的頁面上的產品列表(方法2:這裡先用＄emit('自訂事件名稱',資料參數)方式傳遞)
  
• 完成分頁元件的功能了！！

建立modal元件