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() }},