[TOC]
### 4.1定義組件
```
//head.vue
<template>
<div>
head
</div>
</template>
<script>
export default {
name:"Head"
}
/*1.定義組件 */
</script>
```
### 4.2 在Home.vue 引入組件
```
<template>
<div class="home">
<!-- 4. 使用組件 -->
<Head></Head>
</div>
</template>
<script>
/* 2.引入組件*/
import Head from "../components/head";
</script>
```
### 4.3 在組件的components屬性中注冊
```
export default {
name: "Home",
/* 3.組冊組件*/
components:{
Head
}
};
```