关于vue中父页面的生命周期和子组件生命周期关系导致的报错问题解决

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、问题出现的原因
• 二、问题解决的方法
  • 1.使用v-if删除和添加子组件标签
  • 2.合理设置子组件生命周期的函数
• 三、父页面和子组件的生命流程描述
• 总结 

---

前言

提示：这是记录我个人工作中遇到的问题的解决方法,希望可以帮助到遇到相同问题的道友,如果阐述有错误,欢迎指出指正.

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、问题出现的原因

问题描述：当在一个页面中使用了vue生命周期中的钩子函数,例如常见的created()和mounted()函数,此时再引入一个子组件,并且子组件也使用了vue生命周期的钩子函数时,常常会报一个关于promise的错误,并且不带任何其他详细信息的提示.

        当然了,还有其他的情况出现,例如你在子组件的created()函数中写了一个car_datalist的参数,这个参数的值由父页面点击某个按钮,传递值过来后赋予给car_datalist,这个时候,打开父页面的时候,就会报错car_datalist   is  undefined.

        这正是因为子组件的生命周期和父页面生命周期没有正确设置函数导致的问题,要避免和解决这个问题,就必须了解父页面的生命周期中引入的子组件的生命周期的流程.

二、问题解决的方法

1.使用v-if删除和添加子组件标签(不推荐)

代码如下（示例）：

data(){
    flag_show=false;
}

 <rubbishLog
      v-if="flag_show"
      ref="rubbish_ref"
      :formData="form_rubbishdata"
      @callback="callback3"
    >
 </rubbishLog>

    flag_isTrue() {
      this.flag_show=true;
    },

 说明:不推荐使用v-if这种方法,因为v-if会频繁的创建和删除DOM元素,极大的影响到页面流畅度,当然,在子组件的数据量和DOM元素较少的时候可以使用,子组件的DOM和数据量过大时,建议使用解决方法二,能完好的解决问题.

2.合理设置子组件生命周期的函数(推荐)

代码如下（示例）：

created(){
//不推荐写函数

},

mounted(){

//不推荐写函数
},

说明:在子组件的生命周期中,不推荐写函数,因为子组件的生命周期是在父页面的created和mounted之后,如果子组件的部分参数需要从父页面传递过来,并且把对应的函数放置到了子组件的生命周期中,便会导致报错,错误出现在父页面的第一次打开,一般来说不影响功能使用,但是F12会有明显的一次加载报错.

        如果有函数是必须放置到子组件的created或者mounted中时,建议写不需要父页面传递参数的函数,所有的变量或者函数都是子组件自身声明的,不引用父页面的.

三、常用的父页面和子组件的生命流程描述

父页面vue生命周期和父页面中子组件vue生命周期的简单描述:

A:父页面的创建生命周期                                        a:子组件的创建生命周期

B:父页面的加载生命周期                                        b:子组件的加载生命周期 

流程关系:                A------>a------>b------>B

---

总结

        由此,我们知道了关于父页面引入子组件后,父页面的vue的生命周期和子组件的vue的生命周期的关系,这是2个不同的vue的实例,当要在同一个页面展示的时候,就需要额外注意一下它们生命周期间的关系,理清楚父页面和子组件2个不同的vue的生命周期间的代码逻辑,避免发生一些不必要的报错,而且这些报错通常难以注意到,在思维不清晰的情况下,不太容易找到对应的原因,而实际上呢,却只是vue生命周期简单的逻辑关系而已.