IView Modal模態框父子組件,子父組件相互傳值

要實現的是在table裏面點擊操作按鈕彈出模態框.

父組件


父組件定義模態框狀態變量,默認爲不顯示

子組件

父組件向子組件傳值 


使用v-bind可以傳遞表達式,變量。子組件接收傳的值

 prop 都使得其父子 prop 之間形成了一個單向下行綁定,也就是說數據只能從父組件傳遞到子組件.反過來是不行 的。
 點擊編輯按鍵,modalStatus改爲true,模態框顯示,現在關閉模態框後狀態值modalStatus需要在父組件改爲false,重新隱藏 ,prop只能單向傳遞,所以需要引入$emit, $emit有點像在子組件回調父組件方法 。
首先,在父組件定義回調方法

在標籤上引用


再在子組件中引用即可。

第一參數是回調方法,第二是值 。

總結: 父組件向子組件傳值,可以使用props,子組件向父組件傳值 ,使用$emit ,還有一個$ref,這個可以在父組件中調用子組件中變量與方法 。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章