关键词搜索

全站搜索
×
密码登录在这里
×
注册会员
×

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

vue父子组件生命周期顺序

发布2022-03-15 浏览571次

详情内容

在vue经常用到组件,那父子组vue父子组件生命周期顺序,这样才能更好的传参和调试方法

首先回顾一下父子组件生命周期的执行顺序:

 加载渲染过程

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

   子组件更新过程

父beforeUpdate ---> 子beforeUpdate---> 子updated---> 父updated   

  父组件更新过程

父beforeUpdate ---> 父updated

  销毁过程

父beforeDestroy ---> 子beforeDestroy ---> 子destroyed---> 父destroyed


在父组件中点击某条数据显示子组件详情时,由于父组件dom已经挂载完成,子组件dom也完成挂载渲染,所以不会重新渲染刷新。因此在点击详情传入参数后,需要重新初始化子组件。

在这里提供两种方法:

1.设置子组件的ref属性,通过$refs.dszx.initData()来初始化子组件

/设置ref属性
<consultEdit :getMainID='rowID' ref="dszx"></consultEdit>
//调用子组件初始化数据的方法
this.$refs.dszx.initData()
//初始化数据
initData(){
      //获取数据并重新赋值
}

2.使用父子组件间的通信,通过监听某个值的状态来决定是否初始化子组件

//父组件传参
<consultEdit :getMainID='rowID'></consultEdit>
//子组件接收参数,并监听此值变化,一旦变化则初始化数据
props:["getMainID"],
watch:{
        getMainID(newVal,oldVal){
            this.initData()
        }
},


点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
确定支付下载