el-tab-pane实现单击某个tab请求某个标签的接口(防止在父组件请求了全部接口)
需求是想在点击某个tab 的时候才请求列表数据
![在这里插入图片描述](https://img-blog.csdnimg.cn/1a06db0e29dd46b59946a5916e8e8ea2.png#pic_center)
父组件
<el-tabs
class="user-data-tabs"
v-model="activeName"
@tab-click="handleClick"
>
<el-tab-pane label="aaa" name="first"
><PositionData
name="first"
:radio="currencyRadio"
:activeNameTab="activeName"
/></el-tab-pane>
<el-tab-pane label="bbb" name="second"
><CompositeNumber
name="second"
:radio="currencyRadio"
:activeNameTab="activeName"
/></el-tab-pane>
<el-tab-pane label="ccc" name="third"
><WaveRate
name="third"
:radio="currencyRadio"
:activeNameTab="activeName"
/></el-tab-pane>
<el-tab-pane label="ddd" name="fourth"
><EpochMaking
name="fourth"
:radio="currencyRadio"
:activeNameTab="activeName"
/></el-tab-pane>
<el-tab-pane label="eee" name="fifth"
><OtherNumbers
name="fifth"
:radio="currencyRadio"
:activeNameTab="activeName"
/></el-tab-pane>
</el-tabs>
data() {
return {
currencyRadio: "aaa",
activeName: "first",
};
},
子组件
props: {
radio: { type: String },
name: { type: String },
activeNameTab: {
type: String,
required: true,
},
},
data() {
return {
isRepetition: false,
}
}
watch: {
activeNameTab(newValue) {
this.getListDataPageAction(this.name, newValue, this.radio);
},
radio: {
handler(newValue) {
this.getListDataPageAction(this.name, this.activeNameTab, newValue);
},
immediate: true,
},
},
methods: {
getListDataPageAction(name, activeNameTab, radio) {
if (name === activeNameTab && !this.isRepetition) {
this.isRepetition = true;
this.getListData(radio);
}
},
},
getListData(radio) {
axios...... 在 await下面要设置 this.isRepetition= false
}