vue組件之間相互傳值和方法調用

父組件向子組件傳值
子組件定義需要的參數、類型,父組件通過綁定屬性傳入子組件,子組件用props接收

父組件調用
在這裏插入圖片描述
子組件接收
在這裏插入圖片描述
子組件向父組件傳值

子組件向父組件傳值,通過vue函數 $emit 發送回父組件。父組件可以通過屬性綁定的方式接收。

子組件傳值
在這裏插入圖片描述

父組件通過sync修飾符,可以同步接收到子組件參數
在這裏插入圖片描述
父組件調用子組件方法

儘管存在 prop 和事件,有的時候你仍可能需要在 JavaScript 裏直接訪問一個子組件。爲了達到這個目的,你可以通過 ref 特性爲這個子組件賦予一個 ID 引用。

子組件
在這裏插入圖片描述
父組件可通過 $refs 調用 input 組件的 focus 方法

在這裏插入圖片描述

子組件調用父組件方法

父組件通過屬性綁定方式綁定方法到子組件

在這裏插入圖片描述
子組件通過 $emit 發送回父組件
在這裏插入圖片描述
$emit 第一個參數是父組件方法名,第二個是需要傳入父組件的值

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