javascript – Wiederverwendungsprobleme bei der Verwendung von Mixin-Komponenten in Vue
仅有的幸福
仅有的幸福 2017-06-14 10:53:39
0
3
887

Beschreiben Sie kurz das Szenario, z. B. a.component und b.component verwenden den folgenden Code:

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();
        }
    }
}

Nach der Verwendung dieses Codes fordern die beiden Komponenten unterschiedliche URLs an, wenn sie nur kommunizieren. CaiGou gibt mir bitte einige Ratschläge

仅有的幸福
仅有的幸福

Antworte allen(3)
世界只因有你

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

習慣沉默

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

过去多啦不再A梦

我现在想到的是

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

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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!