子组件如何调用父组件的异步数据

项目开发过程中,我使用了elementui中的table并把他封装成了组件在首页调用,但我的数据实在父组件中通过axios请求接收的,一开始我使用了普通的父组件传值,但是并不管用,table子组件收不到这个异步数据,这种情况怎么办呢?首先我们来看一下子组件和父组件的生命周期顺序
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
由此我们可以看出,普通的prop传值是不管用的,这个时候我们可以采用一下几种方法
一 利用v-if
在这里插入图片描述
在父组件中,子组件接受的值和vif的字段相同,这样在父组件中,只有收到了这个异步数据,才会进行渲染子组件的操作,相当于用一种巧妙地方法阻塞了dom的渲染

二 子组件用wach,并且加上deep属性,可以直接在handler里面传入在子组件定义好的方法;
在这里插入图片描述
提一嘴,deep属性是因为vue无法检测到对象内部属性值的变化 比如person.firstname的变化,我们需要深度监听,以前在这里进过很多坑

总结一下,vue的生命周期是很重要的知识点,由于vue是数据驱动,有很多数据如果不能正确的转递,页面效果会出大问题,所以无论是路由周期,组件周期,在开发过程中必须烂熟于心,不然问题出在哪很难找出来

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值