Vue.js是一個(gè)用于構(gòu)建用戶界面的JavaScript框架。在Vue中，組件(component)是構(gòu)建用戶界面的重要概念。它允許開發(fā)人員將單個(gè)功能塊封裝在一個(gè)獨(dú)立的、可重用的模塊中，該模塊與其它組件相互組合，構(gòu)成完整的應(yīng)用程序。

在Vue.js中，組件是指一個(gè)可以重復(fù)使用的Vue實(shí)例。由于每個(gè)組件都是一個(gè)獨(dú)立的Vue實(shí)例，所以組件具有完整的Vue實(shí)例功能，包括數(shù)據(jù)、計(jì)算屬性、方法、生命周期鉤子等。

Vue.component('my-component', {
template: '
{{message}}
',
data: function () {
return {
message: 'Hello Vue!'
}
}
})

以上是一個(gè)最基本的Vue組件。它包含一個(gè)稱為"my-component"的Vue組件，該組件有一個(gè)簡單的模板，以及一個(gè)“message”數(shù)據(jù)屬性。

組件的模板(template)可以直接寫在Vue組件的選項(xiàng)中，也可以定義在外部模板中，并在Vue組件的選項(xiàng)中引用。外部模板通常位于HTML文件的獨(dú)立區(qū)域中，如下：

Vue.component('my-component', {
template: '#my-template',
data: function () {
return {
message: 'Hello Vue!'
}
}
})

這是一個(gè)引用外部模板的Vue組件。模板位于script標(biāo)簽中，并且使用id屬性進(jìn)行標(biāo)識(shí)，以便在Vue組件中引用和使用。組件的模板也可以包含其它Vue組件。

Vue.component('my-header', {
template: '
This is my header
'
})
Vue.component('my-footer', {
template: '
This is my footer
'
})
Vue.component('my-component', {
template: '
{{message}}
',
data: function () {
return {
message: 'Hello Vue!'
}
}
})

在上面的代碼示例中，一個(gè)Vue組件包含了兩個(gè)被引用的其它組件。組件之間的通信可以通過自定義事件或Vue實(shí)例之間的可重用方法來完成。

組件是Vue.js中一個(gè)關(guān)鍵的概念，它可以使我們更好地組織代碼，并且提高代碼的可重用性、可維護(hù)性和可讀性。我們可以根據(jù)需要?jiǎng)?chuàng)建多個(gè)組件，并將它們組合成一個(gè)完整的Web應(yīng)用程序。