父页面
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane name="aaa">
<span slot="label">
页面一<el-badge :value="val1"></el-badge>
</span>
</el-tab-pane>
<el-tab-pane name="bbb">
<span slot="label">
页面二<el-badge :value="val2"></el-badge>
</span>
</el-tab-pane>
</el-tabs>
<component-one v-show="child1" @numLength1="getLength($event, 1)"></component-one>
<component-two v-show="child2" @numLength2="getLength($event, 2)"></component-one>
</div>
</template>
<script>
import component-one from 'xxx'
import component-two from 'yyy'
export default{
components: {
component-one,
component-two
},
data() {
return {
activeName: 'aaa',
child1: true,
child2: false,
num1: 0,
num2: 0
}
},
methods: {
handleClick(tab) {
if(tab.name === 'aaa') {
this.child1 = true
this.child2 = false
} else if(tab.name === 'bbb') {
this.child1 = false
this.child2 = true
}
},
getLength(val, key) {
if(key === 1) {
this.num1 = val
} else if(key === 2) {
this.num2 = val
}
// 实现标记实时更新
this.$children[0].$children[0].$forceUpdate()
}
}
}
</script>
子页面一
this.$emit('numLength1', this.List.length)
子页面二
this.$emit('numLength2', this.List.length)