Vue是一個(gè)前端JavaScript框架，可以用于構(gòu)建Web應(yīng)用程序。Vue把Web頁(yè)面分解成了多個(gè)Component組件，每個(gè)組件存在獨(dú)立的HTML、CSS和JavaScript結(jié)構(gòu)。Vue Component可以重用，可以作為局部Component嵌套Deployment。

Vue Component具有良好的可組合性和可重用性，因?yàn)槊總€(gè)Component都像單獨(dú)的條塊組件一樣工作。Vue Component具有以下優(yōu)點(diǎn)：

Vue.component('my-component', {
template: '
A custom component!
'
})

建立Vue Component需要使用Vue.component()方法，參數(shù)是兩個(gè)字符串，一個(gè)是Component的名稱，另一個(gè)是一個(gè)對(duì)象，包括其屬性和方法。其中，必須的template屬性是一個(gè)字符串，指定Component模板的HTML。

Vue Component可以提供數(shù)據(jù)props屬性，它允許父Component向子Component傳遞數(shù)據(jù)。下面是一個(gè)例子：

Vue.component('child-component', {
props: ['name'],
template: '
{{ name }}
'
})
Vue.component('parent-component', {
template: '',
data: function () {
return {
name: 'Jack'
}
}
})

在上面的代碼中，Child Component是一個(gè)簡(jiǎn)單的段落，可以顯示其名字props。Parent Component再次引用一個(gè)子ComponentChild Component，他在其template中使用一個(gè)特殊的語(yǔ)法:name=""，這是子Component的props屬性。在父Component中，我們可以通過(guò)data屬性來(lái)定義子Component中props的值。

另外，Vue Component也可以使用slot分發(fā)內(nèi)容，分發(fā)通常稱為“提供”一個(gè)新的視圖。下面是一個(gè)例子：

Vue.component('my-component', {
template: '
'
})

在上面的例子中，可以看到模板使用了一個(gè)>slot標(biāo)簽。這表明，這個(gè)Component將把它的innerHTML作為Component的內(nèi)容。這一功能類似于AngularJS的“插入”和“插口”。