国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - vue中使用mixin元件重複使用問題
僅有的幸福
僅有的幸福 2017-06-14 10:53:39
0
3
992

簡單描述下場景,例如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ù)用,菜狗求指點~

僅有的幸福
僅有的幸福

全部回覆(3)
世界只因有你

你唯一不同的是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定義方式

習(xí)慣沉默

重複的程式碼丟進(jìn)mixin.js,不重複的initList()在各個元件單獨寫就行了

過去多啦不再A夢

我現(xiàn)在想到的是

initList () {
    let url = ''
    // 這個地方寫個判斷
    if (條件a){
        url = ...
    } else {
        url = ...
    }
    axios({
        url: url,
        data: {}
    })
}

其他不用改,至於判斷怎麼寫,自己根據(jù)兩個頁面的不同自己寫個吧。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板