首页 技术设计 前端 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"><!--swig0--></el-radio>
这样就能区分二者选择的不同值。