1. 程式人生 > >vue之子元件呼叫父元件的方法

vue之子元件呼叫父元件的方法

遇到一個需求:
這裡寫圖片描述
如圖,表格是父元件,元件載入的時候,呼叫getAddress()從後臺獲取資料
這裡寫圖片描述

點選編輯按鈕彈出一個框
這裡寫圖片描述
彈出框是子元件,用來編輯表格裡面的資訊,遇到了一個問題,彈框儲存以後,頁面上未能及時顯示出改變以後的資料,
這裡寫圖片描述
一開始使用了頁面重新整理的辦法,但是感覺每次編輯都要重新整理,體驗不好,於是想用另外的方法,在子元件裡觸發父元件的getAddress()方法
於是在子元件中添加了程式碼
這裡寫圖片描述
但是測試不生效,經過查資料顯示,子元件觸發父元件的方法,單單這麼寫是不對的.
應該在子元件中用@接收一下,在$emit觸發
於是修改父元件程式碼
這裡寫圖片描述
給子元件傳了一個方法getAddress

,命名為save
子元件觸發save即可
這裡寫圖片描述
經過測試,生效了