问题:父组件通过属性绑定更新了传递给子组件的prop属性 子组件却没有及时更新
父组件:通过props向子组件传递了一个数组info
当我点击父组件的按钮时,发请求获取了数据并赋值给了info数组,点击事件代码在下面(解决修改代码过程)
<div class="">
<button @click="btnClick">发送get请求</button>
<Child :infoList="infoList" ref="child" />
</div>
data() {
return {
infoList: [],
};
},
父组件
btnClick() {
axios.get("http://localhost:8080/api/contactList").then((res) => {
this.infoList = res.data;
this.$refs.child.getNewestVal(); // 子组件获取到的infoList 不是最新的
});
},
子组件:通过props接收了父组件传过来的数组;它后一个方法,获取最新的数组值
props: ["infoList"],
methods: {
getNewestVal() {
console.log(this.infoList); // 子组件获取到的infoList 不是最新的
},
},
解决:this.$nextTick
父组件
btnClick() {
axios.get("http://localhost:8080/api/contactList").then((res) => {
this.infoList = res.data.data;
this.$nextTick(() => {
this.$refs.child.getNewestVal();
});
});
},