vue父子元件傳參後,子元件重新初始化
阿新 • • 發佈:2020-12-26
首先回顧一下父子元件生命週期的執行順序:
載入渲染過程
- 父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() } },