詳細解讀vue中的mixin

vue中提供了一個混合機制--mixins，用來更有效率的實作元件內容的重複使用。以下跟大家談談我對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的鉤子函數會比元件的鉤子函數先被調用。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在vue中如何渲染函數render（詳細教程）

##有關JS希爾排序演算法（詳細教程)

有關jade模板引擎的使用詳情

#如何自訂PC微信掃碼登入

使用javascript如何實現QQ空間相簿展示

有關js事件的循環機制（詳細教程）

有關JS排序演算法總結

在Angular4中如何實作表單回應

#在vue中如何載入元件webpack require.ensure

#在vue元件中如何使用iframe元素############使用vue如何實作nav導覽列############如何實作網頁快報向上捲動### #########在Angular2中如何實作斷點偵錯ts檔案#############在vue-router中如何實作路由懶載入######### ###使用Angularjs過濾器如何實作動態搜尋############透過vue-cli如何建構vue應用#######

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