---
# System prepended metadata

title: Vue學習#23 extend
tags: [Vue 直播班 - 2022 春季班]

---

# Vue學習#23 extend
###### tags: `Vue 直播班 - 2022 春季班`

## 什麼是 extend
擴充元件，但使用起來跟 `mixins` 一樣， `extend` 後就可使用另一個元件的資料以及方法，唯一的差別在於 `extend` 只能擴充一個並不能多個擴充

## 使用方法

### 在元件下使用 extend 並直接套入元件的名稱
![](https://i.imgur.com/zqvBk2R.png)

### 完成!

## 注意事項

### 生命週期觸發順序

當一個元件同時使用 `mixins` 跟 `extend` 時
#### <font color="red">**生命週期的觸發順序: `extend` > `mixins` > `元件本身的生命週期`** </font>


### mixins Vs. extend Vs. 元件本身權重

當一個元件同時使用 `mixins` 跟 `extend` 時，且三者同時資料或是方法有相同名稱時
#### <font color="red">**權重優先順序為 : 元件本身 > `mixins` > `extend`**</font>

## [範例](https://codepen.io/binlandz123/pen/OJzKqzJ)