javascript – Wiederverwendungsprobleme bei der Verwendung von Mixin-Komponenten in Vue

Question

Beschreiben Sie kurz das Szenario. Beispielsweise verwenden a.component und b.component den folgenden Code. Nachdem die beiden Komponenten diesen Code verwendet haben, sind die bei der Kommunikation angeforderten URLs unterschiedlich gib mir einen Rat~

世界只因有你 · Answer

你唯一不同的是url，那么你把url作为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定义方式

習慣沉默 · Answer

重复的代码丢进mixin.js，不重复的initList()在各个组件单独写就行了

过去多啦不再A梦 · Answer

我现在想到的是

initList () {
    let url = ''
    // 这个地方写个判断
    if (条件a){
        url = ...
    } else {
        url = ...
    }
    axios({
        url: url,
        data: {}
    })
}

其他不用改，至于判断怎么写，自己根据两个页面的不同自己写个吧。