vue 同一页面多次引用同一组件

vue elementui同一页面多次引用同一组件(导致 组件只显示一个,且数据覆盖)

1. 需求是在同一页面 有两个表格都带有分页功能,于是选择了将分页抽取成组件,一个页面调了两次组件;

2. 需要往子组件里传不同的接口路径,在子组件里去写方法请求,将返回结果传给父组件,父组件拿到结果赋给表格data值,显示列表数据;

解决问题的方法:

1.页面调用子组件,实例化两个

//第一处调用子组件
<pagination @get-list="getpagequery"  :getDataListURL="getqueryURL" :getDataListIsPage="true" :dataForm="dataForm">
</pagination>                      

//第二处调用子组件
<paginationConsults2 @get-list="getpageconsult" :getDataListURL="getconsultURL" :getDataListIsPage="true" :dataForm="dataForm"></paginationConsults2>

import pagination from '@/components/page/page.vue';
import paginationConsults2 from '@/components/page/page.vue';
components:{pagination,paginationConsults2},

2.在引用组件中新增一个props，命名groupId来区分。

在父组件中：

<template>
    <div>
        <div>
            <children id="select1" :groupId="groupId1"></children>
        </div>
        <div>
            <children id="select2" :groupId="groupId2"></children>
        </div>
    </div>
</template>

data() {
    return {
        groupId1: '0',
        groupId2: '1'
    }
}

在子组件中：

<el-radio v-model="radio" :label="groupId+index">{{....}}</el-radio>

这样就能区分二者选择的不同值。