亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue中使用mixin組件復用問題

vue中使用mixin組件復用問題

慕妹3242003 2018-11-15 10:18:00
簡單描述下場景,比如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復用,菜狗求指點~
查看完整描述

1 回答

?
牧羊人nacy

TA貢獻1862條經驗 獲得超7個贊

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

查看完整回答
反對 回復 2018-12-21
  • 1 回答
  • 0 關注
  • 628 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號