當(dāng)我們的Vue項目功能越來越多時，如果有類似的組件，可能會發(fā)現(xiàn)自己一次又一次地復(fù)制和粘貼相同的數(shù)據(jù)、方法和 watch。當(dāng)然，我們可以將所有這些單獨的文件編寫為一個單獨的組件，并使用 prop 來嘗試自定義它們，但是使用這么多 props 很容易造成混亂且難懂。為了避免這個問題，大多數(shù)人只是繼續(xù)添加重復(fù)的代碼，盡管自己感覺應(yīng)該有更好的解決方案。

值得慶幸的是，Vue 引入mixin來解決這類的問題，mixin是在不同組件之間共享可重用代碼的最簡單方法之一。Mixin 對象可以使用任何組件選項如data、mounted、created、update等，當(dāng)組件使用 Mixin 時，Mixin 對象中的所有信息都將混合到組件中。然后，組件將有權(quán)訪問mixin中的所有選項，就像在組件本身中聲明的那樣。接著，我們通過示例來幫助加深一下印象：

正如我們所看到的，在使用mixin之后，該組件包含mixin中的所有數(shù)據(jù)，并且可以通過使用this來訪問mxin中的數(shù)據(jù)和方法。我們還可以使用變量而不是單獨的文件來定義mixin。坦白地說，這是我們需要了解的大多數(shù)關(guān)于mixin的知識，但是我認(rèn)為了解某些用例和特殊情況很有用。

如果發(fā)生命名沖突該怎么辦?

當(dāng)mixin中的數(shù)據(jù)、方法或任何組件選項與組件中的選項具有相同的名稱時，可能會發(fā)生組件與其mixin之間的命名沖突。如果發(fā)生這種情況，則組件本身的屬性將優(yōu)先。例如，如果在組件和mixin中都有一個title數(shù)據(jù)變量。title將返回組件中定義的值，如下所示：

總結(jié)

一般來說，對于Vue 的 mixin，我們還有很多要了解，但是上面這些知識在開發(fā)中一般足夠用了。如果你想了解更高級的主題，比如Vue中的全局mixin和自定義合并設(shè)置，可以在 Vue文檔中找到這些信息。