目錄

• 前言
• 混入
• 混入注意(重名情況)
• 區域性混入
• 全域性混入
• 繼承
• 混入和繼承的區別
• 總結

前言

中的混入(mixin)是一個比較簡單的知識點。熟悉預處理語言比如less、sass的開發者對mixin肯定很熟悉。Vue中的mixin幾乎跟less等裡面的mixin一樣，都是將定義好的一些功能原樣注入Vue元件當中，也有些類似面向物件中的繼承(我只是說類似:) )。

mixin是一個物件，這個物件的屬性可以是Vue例項或者元件例項的生命週期鉤子、屬性等，當全域性混入或者混入到元件後，Vue例項或者元件例項就擁有了mixin中定義的生命週期鉤子、屬性等等。如果兩者中有重複的，會按照一定的規則合併。

混入

• 將多個vue檔案內重複使用的功能程式碼，提取成單個檔案，在需要使用的地方進行呼叫即可。
• 在一個js檔案內定義一個物件,在物件中可以寫 vue檔案內的 data 、methods、components等所有<script>中可以定義的程式碼。

混入注意(重名情況)

• 元件中的 data變數名 和 混入中的 data變數 名,發生重名時,以元件為準;
• 元件中的 methods，computed，wath名稱 和 混入中的 methods，computed，wath名稱 名,以元件為準;
• 元件中的 生命鉤子函式 和 混入中的 生命鉤子函式 名,都會執行,但是元件中的鉤子函式優先執行 ;AHWzyMOsZZ
http://www.cppcns.com

區域性混入

全域性混入

定義及全域性註冊

呼叫

繼承

• 注意：這裡是不適合多繼承的，多繼承問題出現會多。
• extends除了可以繼承 .vue 檔案，而且可以和 mixin一樣使用 js檔案內的物件。
• extends繼承 .vue 檔案內的 template內的html是無法繼承的

混入和繼承的區別

• 先看看官方文件的定義,其實兩個都可www.cppcns.com以理解為繼承;
• mixins接收物件陣列（可理解為多繼承）;
• extends接收的是物件http://www.cppcns.com或函式（可理解為單繼承）。
• 注意: 如果一個元件,既使用 繼承,又使用 混入,它們二者中如果有重名,則混入會覆蓋繼承

總結

到此這篇關於Vue混入和繼承的文章就介紹到這了,更多相關Vue混入和繼承內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！