vue中异步请求到的数据父向子传值如何动态传递

2023-04-20

由于axios请求是异步的而组件之间传递数据是同步的这个时候就会出现一些问题
当数据请求过来的时候子组件已经渲染这个时候传递过去的数据是空的。

首先要知道父子组件的渲染顺序

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程 父beforeUpdate->父updated

销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

了解完这个就直接上干货

方法1:在调用子组件的时候使用v-if指令来判断数据的状态 如果有数据了 那就渲染 (不推荐) 原因 :
因为这样如果数据量大的话会渲染非常的慢,刷新页面会出现闪动的效果

方法2:侦听器watch 在子组件添加侦听器 侦听传递过来的数据 ,如果有数据了那就重新赋值 (不推荐) 原因 :
原因很简单因为每次数据发生变化他都会被调用一次

方法3:给组件添加ref属性 然后在子组件中定义一个函数 把请求到的数据通过
this.$refs.[refAttribute].methodName(params) 将数据传递给子组件 (推荐)

方法4:直接将数据存放在vuex中 让子组件通过vuex去取数据 (推荐)

发表评论

邮箱地址不会被公开。 必填项已用*标注