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