父子组件生命周期及子组件获取数据传值问题剖析

一、父子组件的生命周期

1.普通父子组件：

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

2.爷组件Y、父组件F、子组件Z

其中父组件为component(:is="")写法，

子组件为按需引入写法 

switch(this.pos){
    case enums.top:
        return ()=> import("./top.vue")
    default:
        return ()=>import("./default.vue")
}

生命周期：

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

二、父传子props数据问题分析

1.异步数据问题 在子组件的created和mounted打印不到最新的props 

如父组件传过来的数据是created中请求接口获取的，走到父created遇见请求接口的异步任务，会将其放到一个任务队列，继续执行生命周期（生命周期是同步的）钩子，执行到子组件的created和mounted，还没开始请求接口当然打印不到最新的数据,只能打印到父组件在data中定义的该数据

注意：如果在created中有await语法则await之后的代码块同样的也会被放入任务队列，先执行子组件的生命周期，子挂载后再执行父mounted中的同步代码，等所有同步任务执行完再执行await的异步及await之后的代码块

2.同步数据 父组件在data定义的数据或执行到子created前父组件生命周期中的同步数据

同步数据可以在子组件的created中直接打印处理

三、子组件渲染及如何处理父组件的异步数据 

1.无需在子组件中进行处理的数据

如父传递的数据无需特别处理，不论该数据是同步异步，都可用来展示，因为vue是响应式的即使异步数据等数据更新后页面后自动刷新的，不过若为异步数据在子的created里打印不到最新的，不过为什莫要打印呢哈哈

2.子对接受的父数据需要处理

同步：可直接在created写方法进行处理

异步：

方案一：watch 监听到传来的新数据时通过方法进行处理

方案二：在父组件添加v-if 如下,请求接口后 给list赋值，通过list的长度判断是否展示模块

这样就可以确保子组件执行created值一定是接口的值然后再进行处理，相当于把数据变成同步的了

topModule(v-if="list.length")
data(){
    return {
        list:[]   
     }
}

以上就是父子组件生命周期及子组件获取数据问题的详细内容，更多关于父子组件生命周期传值的资料请关注脚本之家其它相关文章！

最新评论