Vue中的組件是一種獨立封裝的代碼塊，用來處理特定的功能或界面展現(xiàn)。使用組件能夠有效地提高代碼復(fù)用率和開發(fā)效率，同時也可以讓代碼更加易于維護(hù)。

在Vue中，組件是通過Vue.extend()方法來創(chuàng)建的。該方法會返回一個組件構(gòu)造器，可以使用此構(gòu)造器去創(chuàng)建組件實例。

Vue.extend({
// 組件配置對象
template: '
My Component
',
// ...
})

如上所示，組件配置對象中可以包含template模板、data狀態(tài)、methods方法、props屬性等等，這些配置項可以自由靈活地配置組件的行為和展現(xiàn)。

在應(yīng)用中使用組件的時候，可以通過注冊全局組件或局部組件的方式來實現(xiàn)。全局注冊的組件可以在整個應(yīng)用中使用，而局部注冊的組件只能在特定的組件中使用。

// 全局組件
Vue.component('my-component', {
// 組件配置對象
template: '
My Component
',
// ...
})
// 局部組件
new Vue({
el: '#app',
components: {
'my-component': {
// 組件配置對象
template: '
My Component
',
// ...
}
}
})

調(diào)用組件的方式可以是標(biāo)簽名，也可以是組件實例對象的方式。

// 標(biāo)簽名// 組件實例對象
new MyComponent().$mount('#app')

組件之間的通信主要有三種方式：props、$emit和$parent/$children。其中，props用于父組件向子組件傳遞數(shù)據(jù)，$emit用于子組件向父組件發(fā)送事件，$parent/$children用于父組件與子組件之間的訪問和調(diào)用。

// props
// 父組件模板// 子組件配置對象
Vue.extend({
props: {
propData: {
type: String,
required: true
}
}
})
// $emit
// 子組件模板click me// 父組件模板// $parent/$children
// 父組件調(diào)用子組件
new Vue({
el: '#app',
mounted() {
const childInstance = this.$children.find(child =>child.$options.name === 'child-component')
childInstance.childMethod()
}
})

除此之外，Vue還提供了許多其他的組件功能，如插槽slot、動態(tài)組件和異步組件等等，可以根據(jù)具體業(yè)務(wù)需求進(jìn)行使用。