可复用性和组合就是将组件可复用性的使用和组合这个组件。
可复用性和组合
我们可以新建一个 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 页面截图：
整个截图：