问题: 父组件props传值给子组件,子组件在created中获取不到传过来的值
关于props传值,这里不赘述直接看官网:https://cn.vuejs.org/v2/guide/components-props.html
分析:因为父组件props传给子组件的值是通过后端接口返回的数据,也就是说是异步返回的数据,那么问题来了,你怎么知道后端什么时候请求完成,然后完成赋值呢?所以导致取值不同步,当然获取不到。
解决方案:
1.可以用setTimeout来延时,等异步请求数据完成了,再赋值(不推荐)
写一个方法:
getAsyncDataBySetTimeout() {
setTimeout(() => {
this.queryDataByAsync() // 你的异步请求接口
},2000) // 延迟2秒
}
2.在watch中监听props的变化,如果有返回值就直接赋值,具体实现如下:
editTableList: function(newVal, oldVal) => {
// tableList 就是你要赋值的变量
this.tableList = newVal
// 这里vue 会自定监听editTableList的变化,如果有返回值,则自动赋值给newVal参数,所以这时候就可以获取到props值了
// 当有值是再执行相应的方法
newVal && this.queryAsyncDataByNewval()
}
// 或者这样写
editTableList: {
handler (newVal, oldVal) {
// tableList 就是你要赋值的变量
this.tableList = newVal
// 这里vue 会自定监听editTableList的变化,如果有返回值,则自动赋值给newVal参数,所以这时候就可以获取到props值了
// 当有值是再执行相应的方法
newVal && this.queryAsyncDataByNewval()
},
// immediate如果为true 代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法
// 初始化立即执行,这样我们就可以在created中去掉某些预先请求接口了
immediate: true,
deep: true // 如果是对象要深度监听
}
/**
总结:对于传递的值是对象,并且是异步获取的(后端接口返回),
都需要在子组件中监听props,这样,
才能实时动态获取父组件中数据的变化,
当父组件中的数据发生变化,子组件也能同步更新,
保证状态的一致,同步。*/