元件是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