在 Vue3 中元件允許我們將 UI 劃分為獨立的、可重複使用的部分，並且可以對每個部分進行單獨的思考。 在實際應用中，元件常常被組織成層層嵌套的樹狀結構：
參考來至: https://tw.yahoo.com/
我們可以看到，紅色區塊將頁面分割成各個部分。這樣做的好處是，在後續的維護過程中，我們無需再從整個網頁中搜索相應的區塊，然後再查找相應的 JavaScript 函數進行修改。在這方面，Vue 使用了元件化的方式，將紅色區塊分別建立為一個.vue文件。這樣可以幫助我們在後續維護程式時，只需處理與問題有關的特定區塊的 Vue 文件。
基礎應用
定義一個元件
- 通常會將 Vue 元件定義在一個單獨的 .vue 檔案中
- 我們這邊簡單的建立一個含有 button 的區塊文件
- 將 file 名稱定義為 mybutton.vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">You clicked me {{ count }} times.</button>
</template>
主頁面應用元件
- 我們要在主頁面使用定義好的區塊 通常要先 import 定義好的區塊文件
- 直接在 template 使用即可
<script setup>
import mybutton from './mybutton.vue'
</script>
<template>
<h1>組件切塊</h1>
<p>
<mybutton></mybutton>
<mybutton></mybutton>
<mybutton></mybutton>
</p>
</template>