元件是Vue最強大的功能之一，可以將重複的程式碼封裝，提高效率和維護性。

元件組織

把網頁分成區塊，區塊內還可以在分區塊，每個區塊都有各自的模板、樣式，與行為邏輯，把其中一個拿掉，期他的區塊也不會因此而壞掉。

元件註冊與宣告

首先，賦予他一個名稱，名稱有兩種寫法

• kebab-case連字號
• pascalCase駝峰式

HTML標籤沒有大小寫的區分，所以用駝峰式註冊元件時，在HTML模板呼叫時要改用連字號寫法

Vue.component('my-component', { /* ... */ })
Vue.component('MyComponent', { /* ... */ })

<my-component></my-component>
<my-component></my-component>

再來，就是元件的位置，元件也有全域和區域之分

1. 全域元件

<my-component></my-component>

const app = Vue.createApp({
})
app.component('my-component', {
    template: `<h3>Hello Vue</h3>`,
    data() {

    }
})
app.mount('#app');

2. 區域元件

在實體上加上components屬性，區域元件就可以在裡面定義

const app = Vue.createApp({
    components: {
        'my-component': {
            template: `<h3>Hello Vue</h3>`
        }
    }
})

3. 補充: import元件

支援import方式引入

import myComponent from './conponents/my-component.js'
const app = Vue.createApp({
    components: {
       myComponent
    }
})

網頁區塊封裝成元件模板

當template內容愈來愈多的時候，可以利用x-template來打包成易閱讀的模板，template只需要寫上ID就能執行。

<script type="text/x-template" id="card">
    <tr>
        <td>{{ person.name }}</td>
        <td>{{ person.cash }}</td>
        <td>{{ person.icash }}</td>
      </tr>
</script>

app.component('card', {
    template: `#card`,
})

子元件的 data 必須是函數

JS是透過reference方式傳遞資料，若沒有透過function回傳一個新物件，那麼子元件的data就會共用，在點擊click按鈕時四個元件內的data都會加1。

<card></card>
<card></card>
<card></card>
<card></card>

<script type="text/x-template" id="card-component">
   <div class="card">
      <div v-model="count">
        count:{{count}}
      </div>
     <button @click="count++">click</button>
  </div>
</script>

const app = Vue.createApp({
})
const $data = {
    count: 0
}
app.component('card', {
    data() {
        return $data
    },
    template: '#card-component',
})
app.mount('#app');

改成這樣的方式就可以個別的觸發加一事件

app.component('card', {
    data() {
        return {
            count: 0
        }
    },
    template: '#card-component',
})

若要個別清除資料回到初始值可以使用Object.assign和this.$options.data()讓data資料回到0

app.component('card', {
    data() {
        return {
            count: 0
        }
    },
    template: '#card-component',
    methods: {
        resetData() {
            Object.assign(this.$data, this.$options.data());
        }
    }
})

參考資料

為什麼要用Vue.js的元件化開發
https://iter01.com/78286.html