解决方法,使用ref的父子组件通信和this.$nextTick()
思路:给父组件中调用的子组件挂上ref,在通过this.$nextTick()延迟加载实现。
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
以下是代码实现方法
父组件
<template>
<div class="project-person-manager">
<van-tabs
class="project-tab"
color="#4381F1"
v-model="activeName"
@click="onTabClick"
>
<van-tab title="待办" name="todoTask">
<todo-Task />
</van-tab>
<van-tab class="project-tab" title="已办" name="doneTask">
<done-Task ref="_doneTask" />
</van-tab>
</van-tabs>
</div>
</template>
<script>
import headerTitle from "components/header/headerTitle";
import todoTask from "./todoTask/index.vue";
import doneTask from "./doneTask/index.vue";
export default {
components: {
headerTitle,
todoTask,
doneTask,
},
data() {
return {
activeName: this.$store.state.taskTab,
};
},
methods: {
onTabClick(name, title) {
this.$store.commit("SET_TASK_TAB", name);
if (name === "doneTask") {
this.$nextTick( ()=>{
this.$refs['_doneTask'].getList('')
})
}
},
},
};
</script>
子组件
// 请求数据的方法
getList(flag) {
getdoneList(this.listQuery)
.then((res) => {
if (res.code === 200) {
this.totalNum = res.data.total;
this.noShowData = this.totalNum == 0 ? true : false;
this.loading = false;
this.refreshing = false;
if (flag == "onload") {
this.tempList.push(...res.data.list);
} else {
(this.tempList = res.data.list), this.scrollBackTop();
}
} else {
this.$toast(res.msg, 2000);
}
})
.catch((err) => {
this.$toast(err, 2000);
this.noShowData = true;
this.refreshing = false;
this.loading = false;
this.finished = false;
this.listQuery.page = 1;
this.tempList = [];
});
},
如果不适用this.$nextTick() 会出现如下问题,在我的项目中