搜索

首页  >  问答  >  正文

javascript - vue中使用mixin组件复用问题

简单描述下场景,比如a.component,b.component均会使用到如下代码,

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

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

        }

    }

}</code>

两个组件在使用该段代码的时候之后,只用通信的时候请求的url不一样,怎么使用mixin复用,菜狗求指点~

仅有的幸福仅有的幸福2744 天前910

全部回复(3)我来回复

  • 世界只因有你

    世界只因有你2017-06-14 10:55:39

    你唯一不同的是url,那么你把url作为data属性定义不就行了,你的mixin添加data属性url,然后在a,b组件中分别定义url,就会覆盖mixin中的url,如下:

    mixin:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

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

            }

        }

    }</code>

    a:

    1

    2

    3

    4

    5

    6

    <code>export default(){

        mixins: [引入mixin],

        data(){

            url: '这里是a中的url'

        }

    }</code>

    b同a定义方式

    回复
    0
  • 習慣沉默

    習慣沉默2017-06-14 10:55:39

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

    回复
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-06-14 10:55:39

    我现在想到的是

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    <code>initList () {

        let url = ''

        // 这个地方写个判断

        if (条件a){

            url = ...

        } else {

            url = ...

        }

        axios({

            url: url,

            data: {}

        })

    }</code>

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

    回复
    0
  • 取消回复