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