vue封裝一個組件(進階必學)

相比較於函數的封裝，規模更大一點的便是組件的封裝，組件包含了模版、腳本以及樣式的代碼，在實際開發中組件的使用頻率也是非常大的，我們項目中的每一個頁面其實都可以看作是一個父組件，其可以包含很多子組件，子組件通過接收父組件的值來渲染頁面，父組件通過響應子組件的回調來觸發事件。

 

封裝一個組件主要包含兩種方式，一種是最常見的整體封裝，用戶通過改變數據源來呈現不同的頁面狀態，代碼結構不可定制化。例如：

```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)
```