相比較於函式的封裝，規模更大一點的便是元件的封裝，元件包含了模版、指令碼以及樣式的程式碼，在實際開發中元件的使用頻率也是非常大的，我們專案中的每一個頁面其實都可以看作是一個父元件，其可以包含很多子元件，子元件通過接收父元件的值來渲染頁面，父元件通過響應子元件的回撥來觸發事件。
封裝一個元件主要包含兩種方式，一種是最常見的整體封裝，使用者通過改變資料來源來呈現不同的頁面狀態，程式碼結構不可定製化。例如：

```html
<div>
    <my-component data="我是父元件傳入子元件的資料"></my-component>
</div>
```

另一種便是自定義封裝，也就是插槽(slot)，我們可以開放一部分槽位給父元件，使其能夠進行一定程度的定製化，例如：

```html
<div>
    <my-component data="我是父元件傳入子元件的資料">
        <template slot="customize">
            <span>這是定製化的資料</span>
        </template>
    </my-component>
</div>
```
 

在 myComponent 元件中我們便可以接收對應的 slot：

```html
<div class="container">
    <span>{{ data }}</span>
    <slot name="customize"></slot>
<div>
```

這裡我們通過定義 slot 標籤的 name 值為 customize 來接收父元件在使用該元件時在 template 標籤上定義的 slot="customize" 中的程式碼，不同父元件可以定製不同的 slot 程式碼來實現差異化的插槽。最終渲染出來的程式碼如下：

```html
<div>
    <div class="container">
        <span>我是父元件傳入子元件的資料</span>
        <span>這是定製化的資料</span>
    </div>
</div>
```
 

這樣我們就完成了一個小型元件的封裝，將共用程式碼封裝到元件中去，頁面需要引入的時候直接使用 import 並進行相應註冊即可，當然你也可以進行全域性的引入：

```javascript
import myComponent from '../myComponent.vue'

// 全域性
Vue.component('my-component', myComponent)
```