保捱科技网
您的当前位置:首页vue父子组件传参后,子组件重新初始化

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属性

//调⽤⼦组件初始化数据的⽅法this.$refs.dszx.initData()//初始化数据 initData(){

//获取数据并重新赋值 }

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

//⽗组件传参

//⼦组件接收参数,并监听此值变化,⼀旦变化则初始化数据props:[\"getMainID\"],watch:{

getMainID(newVal,oldVal){ this.initData() }},

因篇幅问题不能全部显示,请点此查看更多更全内容