在Vue应用中，当父组件通过axios异步获取数据后传递给子组件时，可能会遇到子组件在数据未加载时已渲染的问题。本文介绍了两种解决方法：1) 使用watch监听props数据变化，但这可能导致延迟显示；2) 采用Vuex全局状态管理，通过actions获取数据，然后在mutations中更新state，子组件通过computed属性获取并渲染数据。推荐使用第二种方法，以确保数据准备好后再渲染子组件。
前几天遇到一个问题，在父组件中使用axios获取异步数据传给子组件，但是发现子组件在渲染的时候并没有数据，在created里面打印也是空的，结果发现一开始子组件绑定的数据是空的，在请求数据没有返回数据时，子组件就已经加载了，并且他绑定的值也是空的，问题找到了，怎么解决那？有两种方法解决，请看下面代码。
方法一、
开始的时候让子组件隐藏,然后等数据返回的时候，让子组件显示。
export default {
props:['getList'], //接收一个数组
data(){
return {
list: []
}
},
watch:{ // 使用监听的方式，监听数据的变化
getList(val){
this.list = val;
}
}
}
不过这样方式不太合适，有bug，比如我点击一个按钮去获取数据，然后在弹框里面展示数据，弹框是一个子组件，在获取数据的这段过程有可能几百毫秒，也有可能十秒或者更长时间，难道我要在点击按钮过十秒才让弹框显示吗？这这这绝对不行，推荐使用方法二
方法二、 推荐使用
大概逻辑：使用vuex全局状态管理,其实简单，利用vuex的辅助函数(mapState，mapMutations)mapState是将state里面的数据映射到计算中(computed)，mapMutations也是类似，把v
最低0.47元/天 解锁文章
2050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
