Vue父子組件相互傳值

1. 父組件向子組件傳值

??? 子組件在props中創建一個屬性,用以接收父組件傳過來的值

??? 父組件中注冊子組件

??? 在子組件標簽中添加子組件props中創建的屬性

??? 把需要傳給子組件的值賦給該屬性

2. 子組件向父組件傳值

子組件中需要以某種方式例如input事件的方法來觸發一個自定義事件

將需要傳的值作為$emit的第二個參數,該值將作為實參傳給響應自定義事件的方法

在父組件中注冊子組件并在子組件標簽上綁定對自定義事件的監聽

?

3. 父子組件相互傳值

例子效果:父組件和子組件中各有一個input標簽和一個p標簽,通過父組件或子組件中的input進行編輯,同步更改4個標簽的顯示內容。

4. vue的$emit(event,[...args])

觸發當前實例上的事件。附加參數都會傳給監聽器回調。

子組件通過$emit觸發父組件上綁定的自定義事件,將自身數據作為參數傳入事件函數,在父組件的事件函數中將參數賦值給父組件的對應變量。

示例,App.vue中v-on為組件綁定事件(自定義事件),子組件通過$emit觸發事件

總結:無論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個共同點就是有中間介質,子向父的介質是自定義事件,父向子的介質是props中的屬性。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容