vue中使用mixin组件复用问题

简单描述下场景,比如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复用,菜狗求指点~

慕妹3242003
浏览 610回答 1
1回答

牧羊人nacy

你唯一不同的是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定义方式
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript