Hi，大家好，今天開始我們進入程式的優化動作了，首先要來做的是元件化的動作

元件化是什麼呢？

隨著專案的越來越大，頁面上的東西會越來越複雜，這時候可以開始考慮進行優化動作，將常用的項目切分成為一塊塊的小模組，這個切分的動作，可以稱為元件化的動作，他最大的好處是可以共用，並且降低頁面上的複雜度，我們可以把常用的或是會改來改去的部份，做成一個一個的元件（component），頁面上只要在指定的地方，將component擺上去，並且餵資料進去就完成了，後續要進行調整時，也只要把元件拿出來調整就行了，不用去動到 html 的部份

使用元件

上面知道了元件化的好處後，我們開始進行元件化的動作，這次以最早寫的 index.ejs 為調整對像

  const { createApp, onBeforeMount, reactive } = Vue
  const app = createApp({
    setup() {
      const data = reactive(cases = [])
      onBeforeMount(() => {
        axios.get("/saf/jsapi/listCases").then(function (response) {
          data.cases = response.data
        }).catch(function (response) {
          alert(response.response.data)
        })
      })
      return { data }
    },
    methods: {
      gotopage(caseid) {
        window.location.href = "/saf/viewcase/" + caseid
      }
    }
  });
  //註冊元件「my-card」
  app.component("my-card", {
    //html樣版
    template: `
    <div class='col-3 showblock'>
      {{casedesc}}
      <hr>
      提出人：{{fromper}}
    </div>
    `,
    //傳入參數，需與樣版中之 bind 變數名稱相同
    props: ['caseid', 'casedesc', 'fromper']
  })
  app.mount('#app')

說明：
在原先的 setup 完成之後，我們加上了 app.component 來註冊元件，並在其中設定好樣版（template）與傳入參數（props），樣版其實就是 html & css

接下來在 html 的指定位置加入元件即可

<div id="app" class="container">
  <h2>客服留言紀錄</h2>
  <div class="row">
    <my-card v-for="obj in data.cases" @click="gotopage(obj.caseid)" :caseid="obj.caseid"  :casedesc="obj.casedesc"  :fromper="obj.fromper"></my-card>
  </div>
</div>

說明：
元件名稱即為 html 的tag名稱，html 的部份會變得非常的簡單，我們的動作只要使用元件名稱，並利用 v-bind 的方式將參數值給入後即可

結語

這個範例很簡單，所以會看不出來元件化的效果，實際專案使用上，我們只要把 app.component 獨立在一個靜態檔案中，並透過 import 的方式引入，就可以達到元件共用的效果，並且不管有多少個頁面在使用這個元件，我們也只要修改一份檔案就行了，是一個非常方便的機制