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

2022-07-10 15:15:13 字數 803 閱讀 6632

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

載入渲染過程

子元件更新過程

父元件更新過程

銷毀過程

在父元件中點選某條資料顯示子元件詳情時,由於父元件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:

},

vue父子元件傳參

一 首先,值肯定是定義在父元件中的,供所有子元件共享。所以要在父元件的data中定義值 二 其次,父元件要和子元件有契合點 就是在父元件中呼叫 註冊 引用子元件 呼叫 註冊 引用 這裡我繫結了兩個值,乙個是陣列,乙個是字串。2018 03 30 10 15 55 特別補充 總的來說父傳子就是這三個步...

父子元件傳參

這個是父子傳參的乙個語法糖,官網上也有推薦,可以去看一下 一般父子傳參都會這麼寫 父 1 子 1 export default,12 13 1415 子元件可以接收來自父元件的modalvisible。子元件如果要修改modalvisible,可以在自己的data中定義乙個變數 tempmodalv...

Vue父子元件傳參和通訊

vue父子元件之間通訊相對比較簡單,如果非父子間通訊則比較麻煩,可以考慮使用vuex。缺點 父子元件高度依賴。使用ref實現。parent.vue parent add child 1 button c child div template import child from child expor...