vue父子元件傳參後，子元件重新初始化

子墨老师發表於2024-03-11
Vue元件

首先回顧一下父子元件生命週期的執行順序：

載入渲染過程：

  • 父beforeCreate ---> 父created ---> 父beforeMount ---> 子beforeCreate ---> 子created ---> 子beforeMount ---> 子mounted ---> 父mounted

子元件更新過程：

  • 父beforeUpdate ---> 子beforeUpdate---> 子updated---> 父updated

父元件更新過程：

  • 父beforeUpdate ---> 父updated

銷燬過程：

  • 父beforeDestroy ---> 子beforeDestroy ---> 子destroyed---> 父destroyed

在父元件中點選某條資料顯示子元件詳情時，由於父元件dom已經掛載完成,子元件dom也完成掛載渲染，所以不會重新渲染重新整理。因此在點選詳情傳入引數後，需要重新初始化子元件

第一種：設定子元件的ref屬性，透過$refs.dszx.initData()來初始化子元件

//設定ref屬性
<consultEdit :getMainID='rowID' ref="dszx"></consultEdit>
//呼叫子元件初始化資料的方法
this.$refs.dszx.initData()
//初始化資料
initData(){
   //獲取資料並重新賦值
}

第二種：使用父子元件間的通訊，透過監聽某個值的狀態來決定是否初始化子元件

//父元件傳參
<consultEdit :getMainID='rowID'></consultEdit>
//子元件接收引數，並監聽此值變化，一旦變化則初始化資料
props:["getMainID"],
watch:{
        getMainID(newVal,oldVal){
            this.initData()
        }
},

相關文章