可複用性和組合就是將組件可複用性的使用和組合這個組件。
可複用性和組合
我們可以新建一個index.html和index.js，在index.html中引入index.js，然後在index.html中寫入代碼：
<body>
<div id="main">
// 自定義組件名
<vue-hesder class="hesder"></vue-hesder>
</div>
</body>
<script>
new Vue({
el: '#main'
});
</script>index.js中寫入代碼：
Vue.component("vue-hesder", {
template: '<h1>Vue課程</h1>'
});我們會發現，打開頁面並沒有什麼變化，也就是說我們可以將<h1>這個組件放在任意地方，只要index.js這個組件引入了vue.min.js ，那麼它就可以引入這個組件。在組件裏我們可以寫很多事件，比如我們再建一個js叫v.js，同樣的我們把index.js中的內容複製到v.js在進行修改一下：
Vue.component("vue-v", {
template: '<h1>俠課島 - vue課程內容 vue組件</h1>'
});然後在index.html中引入v.js，然後我們在代碼中添加組件標籤<vue-v>。同時我們還可以在頁面中添加任何css樣式來對它進行修飾，但是我們不能直接用組件名進行樣式的編寫，我們需要在組件名裏面用選擇器然後通過選擇器對它再進行添加纔會生效。
// 錯誤示範，這樣不會被認可且不會識別
vue-v{
color:red;
}正示截圖：
我們再定義一個e.js，同樣的操作重複上述步驟，在引用時我們是按順序引用的，因此給我們呈現的效果頁面也是按順序來的。
如果我們想要在其他頁面也同樣使用的話，那麼我們可以重新建一個html比如v.html，然後一樣的index.html代碼，去掉index.js和e.js和相對應的組件和代碼：
那麼我們得到的頁面就是它所單獨對應的頁面，也是可以的。
vue-v頁面截圖：
vue-e頁面截圖：
整個截圖：
