簡單描述下場景,例如a.component,b.component皆會使用到以下程式碼,
import axios from 'axios';
export default(){
data(){
return {
initList: [],
pageSize: 10,
pageNo: 1
}
},
created(){
this.initList();
},
methods: {
initList(){
axios({
url: '/list1',
data: {}
})
.then(res => res.data)
.then(data => {
this.initList = data;
})
},
pageSizeChange(size){
this.pageSize = size;
this.initList();
},
pageNoChange(pageNo){
this.pageNo = pageNo;
this.initList();
}
}
}
兩個元件在使用該段程式碼的時候之後,只用通訊的時候請求的url不一樣,怎麼使用mixin復(fù)用,菜狗求指點~
你唯一不同的是url,那你把url當(dāng)作data屬性定義不就行了,你的mixin加上data屬性url,然後在a,b元件中分別定義url,就會覆蓋mixin中的url,如下:
mixin:
import axios from 'axios';
export default(){
data(){
return {
url: '', // 看這里!
initList: [],
pageSize: 10,
pageNo: 1
}
},
created(){
this.initList();
},
methods: {
initList(){
let url = this.url;
axios({
url: url,
data: {}
})
.then(res => res.data)
.then(data => {
this.initList = data;
})
},
pageSizeChange(size){
this.pageSize = size;
this.initList();
},
pageNoChange(pageNo){
this.pageNo = pageNo;
this.initList();
}
}
}
a:
export default(){
mixins: [引入mixin],
data(){
url: '這里是a中的url'
}
}
b同a定義方式
我現(xiàn)在想到的是
initList () {
let url = ''
// 這個地方寫個判斷
if (條件a){
url = ...
} else {
url = ...
}
axios({
url: url,
data: {}
})
}
其他不用改,至於判斷怎麼寫,自己根據(jù)兩個頁面的不同自己寫個吧。