組件基礎 組件允許我們將 UI 劃分為獨立的、可重用的部分，並且可以對每個部分進行單獨的思考。在實際應用中，組件常常被組織成層層嵌套的樹狀結構：
這和我們嵌套 HTML 元素的方式相似，Vue 實現了自己的組件模型，使我們可以在每個組件內封裝自定義內容與邏輯。Vue 同樣也能很好地配合原生 Web Component。如果你想知道 Vue 組件與原生 Web Components 之間的關係，可以閱讀此章節。
定義一個組件 當使用構建步驟時，我們一般會將 Vue 組件定義在一個單獨的 .vue 文件中，這被叫做單文件組件 (簡稱 SFC)：
vue
vue
當不使用構建步驟時，一個 Vue 組件以一個包含 Vue 特定選項的 JavaScript 對象來定義：
jsexport default {
data() {
return {
count: 0
}
},
template: `
You clicked me {{ count }} times.
`
}jsimport { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
},
template: `
You clicked me {{ count }} times.
`
// 也可以針對一個 DOM 內聯模板：
// template: '#my-template-element'
}這裡的模板是一個內聯的 JavaScript 字符串，Vue 將會在運行時編譯它。你也可以使用 ID 選擇器來指向一個元素 (通常是原生的 元素)，Vue 將會使用其內容作為模板來源。
上面的例子中定義了一個組件，並在一個 .js 文件裡默認導出了它自己，但你也可以通過具名導出在一個文件中導出多個組件。
使用組件 TIP
我們會在接下來的指引中使用 SFC 語法，無論你是否使用構建步驟，組件相關的概念都是相同的。示例一節中展示了兩種場景中的組件使用情況。
要使用一個子組件，我們需要在父組件中導入它。假設我們把計數器組件放在了一個叫做 ButtonCounter.vue 的文件中，這個組件將會以默認導出的形式被暴露給外部。
vue
Here is a child component!
若要將導入的組件暴露給模板，我們需要在 components 選項上註冊它。這個組件將會以其註冊時的名字作為模板中的標籤名。
vue
Here is a child component!
通過
{{ title }}
當一個值被傳遞給 prop 時，它將成為該組件實例上的一個屬性。該屬性的值可以像其他組件屬性一樣，在模板和組件的 this 上下文中訪問。
vue
{{ title }}
defineProps 是一個僅 vue
這聲明了一個組件可能觸發的所有事件，還可以對事件的參數進行驗證。同時，這還可以讓 Vue 避免將它們作為原生事件監聽器隱式地應用於子組件的根元素。
和 defineProps 類似，defineEmits 僅可用於 TypeScript 用戶請參考：為組件 emits 標註類型
如果你沒有在使用