說下我對vue中mixin的一點理解
vue中提供了一種混合機制--mixins，用來更高效的實現組件內容的復用。最開始我一度認為這個和組件好像沒啥區別。。后來發現錯了。下面我們來看看mixins和普通情況下引入組件有什么區別？
組件在引用之后相當於在父組件內開辟了一塊單獨的空間，來根據父組件props過來的值進行相應的操作，單本質上兩者還是涇渭分明，相對獨立。
而mixins則是在引入組件之后，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合並。相當於在引入后，父組件的各種屬性方法都被擴充了。
單純組件引用：
父組件 + 子組件 >>> 父組件 + 子組件
mixins：
父組件 + 子組件 >>> new父組件
作用：多個組件可以共享數據和方法，在使用mixin的組件中引入后，mixin中的方法和屬性也就並入到該組件中，可以直接使用。鈎子函數會兩個都被調用，mixin中的鈎子首先執行。
下面給大家介紹vue mixin的用法，具體介紹如下所示：
1.定義一個 js 文件(mixin.js)
|
1
2
3
4
5
6
7
8
9
10
11
12
|
export
default
{
data() {
return
{
name:
'mixin'
}
},
created() {
console.log(
'mixin...'
,
this
.name);
},
mounted() {},
methods: {}
}
|
關於用法，vue文檔中有詳細的介紹，這里只介紹怎么在一個vue文件中使用mixin。
2.在vue文件中使用mixin
|
1
2
3
4
|
import
'@/mixin'
;
// 引入mixin文件
export
default
{
mixins: [mixin]
}
|
接下來記錄一下我在項目中使用mixin的具體例子:
首先我們來看一下項目中的需求：
大家從圖可以看出來，有兩個模塊的內容差不多一樣，但又有區別。有些人會說既然都差不多為什么不抽出來直接整成一個公共組件呢？不是不可以，但為了以后的維護，萬一產品整了個一個模塊單獨有的呢？這樣不方便以后的代碼維護。所以我使用了mixin。還有一點，后台提供的接口最好是同一個根據不同的類型去拿不同模塊的數據，這樣方便簡單，下面貼代碼：
1.mixin文件中：
2.組件中：
