vue子组件中调用父组件的方法实时更新表格对应数量

项目场景：

知识产权子组件表格增加或删除数据，父组件对应数量变化

---

解决方案：

方法1：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件。

父组件：

<template>
  <keep-alive>
     <component @getNumber="getNumber"></component>
  </keep-alive>
</template>

<script> 
    methods: {
	     // 导航数量
	    getNumber() {
	       console.log('测试');
	    }
  };
</script>

子组件：

<template>
  <div>
    <a-button type="primary" @click="onSubmitupload"> 提交 </a-button>
  </div>
</template>
<script>
  export default {
    methods: {
	    // 获取表格数据
	    getTableData() {
	    	//成功后调父组件方法 
	       this.$emit('getNumber')   
	    },
    }
  };
</script>

方法2：根据表格数据的length来显示

父组件：

<template>
  <keep-alive>
     <component :is="comp" :currentIndex="currentIndex"  @uptNumber="uptNumber"></component>
  </keep-alive>
</template>

<script> 
    export default {
	    data() {
		    return {
		      // 控制切换按钮后改变样式
		      change: 0,
		      // 控制子组件显示
		      comp: 'propertyLearning',
		      currentIndex:0,
		    }
		  },
	    methods: {
	      // 导航切换
		    changeNav(value) {
		      this.change = value
		      if (value === 0) this.comp = 'propertyLearning'
		      if (value === 1) this.comp = 'propertyDegree'
		      if (value === 2) this.comp = 'propertyPatent' 
		      this.currentIndex=value;
		    },
		    // 导航数量
		    getNumber() {
		        this.typeNum = ['2', '2', '1']
		      })   
		    },
		    uptNumber(length, index){
		      this.$set(this.typeNum,index,length);
		      this.typeNum.forEach((item, i) => {
		        if (i == index) {
		          item = length
		        }
		      })
		    }
	    }
  };
</script>

子组件：

export default {
	props: ["currentIndex"],
    methods: {
	    // 获取表格数据
	    getTableData() {
	    	//成功后调父组件方法 
	       this.$emit('uptNumber', this.data.length,that.currentIndex)
	    },
    }