淺談vue中mixin

vue中提供了一個混合機制--mixins，用來更有效率的實作元件內容的重複使用。最開始我一度認為這個和組件好像沒啥差別。 。後來發現錯了。下面我們來看看mixins和普通情況下引入元件有什麼區別？組件在引用之後相當於在父組件內開闢了一塊單獨的空間，來根據父組件props過來的值進行相應的操作，單本質上兩者還是涇渭分明，相對獨立。而mixins則是在引入元件之後，則是將元件內部的內容如data等方法、method等屬性與父元件對應內容合併。相當於在引入後，父組件的各種屬性方法都被擴充了。

     單純元件參考：

          父元件+ 子元件>>>父元件+ 子元件

# 元件元件>>> new父元件 

     值得注意的是，在使用mixins時，父元件和子元件同時擁有子元件內的各種屬性方法，但這並不意義著他們同時分享、同時處理這些變量，兩者之間除了合併，是不會進行任何通訊的。最開始看到mixins的時候，天真的我似乎看到了一種向下的類似vuex的資料共享方案，心情十分激動啊。

 下面要介紹Vue中的mixin

     一，mixin是什麼

mixin檔案是一個對象，可以包含vue元件的任意成分。是分發Vue元件可重複使用功能的非常靈活的方式，當mixin被元件使用時，所有minxin裡的屬性/方法會與元件裡的屬性/方法混合。

二，mixin使用

在Vue元件中可以有mixins屬性，該屬性值類型為陣列。將mixin引入，作為mixins數組的元素mixins: [mixin]

組件A應用了mixin，兩者的屬性如methods,components和directives，將混合為同一個對象，如果methods,components和directives中有同名的屬性，則mixin中的將會被忽略。同名鉤子函數會組成數組並且都會被調用，並且mixin的鉤子函數會比元件的鉤子函數先被調用。

相關推薦：

riot.js學習【二】mixin

JS自訂混合Mixin函數範例

Mixin是什麼概念?

#

以上是淺談vue中mixin的詳細內容。更多資訊請關注PHP中文網其他相關文章！