1. 程式人生 > 實用技巧 >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()
        }
},