1. 程式人生 > >vue學習之父子組件通信兩種方法

vue學習之父子組件通信兩種方法

調用 http 自己 通信 one 不變 學習過程 eth 不可

初學vue,最常用及實用的就是父子組件之間的通信了,在此記錄一點自己的學習過程

方法一:props及$emit

父組件中先引入子組件,然後components裏面註冊組件,然後template裏調用,調用的時候通過v-bind傳遞值給子組件,v-on監聽子組件$emit傳遞過來的值

技術分享圖片

子組件中先用props接收父組件的傳值,註意子組件中不可直接修改父組件的傳值,可通過watch監聽來賦值,通過$emit來傳遞值給父組件

技術分享圖片

方法二:ref

父組件傳值props方法不變,父組件可通過使用ref來調用子組件的方法獲取返回值

技術分享圖片

技術分享圖片

子組件中需在methods中返回值

技術分享圖片

vue學習之父子組件通信兩種方法