Vue 之子組件向父組件通信

coolpail 發(fā)布于2019-08-23 16:58 / 3454人閱讀

摘要：如何把子組件內(nèi)特定的數(shù)據(jù)傳給父組件例如把子組件的名字傳給父組件并在父組件上顯示思路在子組件被點擊后一個事件名和組件的名字在父組件上監(jiān)聽子組件出的事件，并觸發(fā)處理函數(shù)這個處理函數(shù)將子組件傳出的子組件名字顯示在父組件上

如何把子組件內(nèi)特定的數(shù)據(jù)傳給父組件？

例如
把子組件的名字傳給父組件并在父組件上顯示

思路
在子組件被點擊后 emit 一個事件名和組件的名字
在父組件上監(jiān)聽子組件 emit 出的事件，并觸發(fā)處理函數(shù)
這個處理函數(shù)將子組件傳出的子組件名字顯示在父組件上



  
    
    
    
  
  
    
      child name: {{child}}

云服務(wù)器 GPU云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103602.html

相關(guān)文章

vue組件間通信六種方式（完整版）

摘要：本文總結(jié)了組件間通信的幾種方式，如和，以通俗易懂的實例講述這其中的差別及使用場景，希望對小伙伴有些許幫助。狀態(tài)改變提交操作方法。前言組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說，組件可以有以下幾種關(guān)系：showImg(https://segmentfault.com/img/remote/146000001...

frontoldman 2019-08-26 13:48 評論0 收藏0
vue組件間通信六種方式（完整版）

摘要：本文總結(jié)了組件間通信的幾種方式，如和，以通俗易懂的實例講述這其中的差別及使用場景，希望對小伙伴有些許幫助。狀態(tài)改變提交操作方法。前言組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說，組件可以有以下幾種關(guān)系： showImg(https://user-gold-cdn.xitu.io/2019/5/17/16ac35bf...

DDreach 2019-05-21 16:37 評論0 收藏0
Vue父子組件通信的三兩事（prop、emit）

摘要：的單向數(shù)據(jù)傳遞直接作為一個本地變量下面是我的子組件這是父組件給我傳的數(shù)據(jù)運行結(jié)果如下圖子組件向父組件傳遞數(shù)據(jù)基本使用子組件向父組件傳遞數(shù)據(jù)，不能像上面一樣實時的傳遞數(shù)據(jù)，必須通過事件觸發(fā)。組件是Vue核心功能之一，合理的組件化，可以減少我們代碼的冗余，提高項目的可維護性。下面，我將由淺入深的講Vue的組件在講之前，首先我們先了解一下組件的命名。 HTML是對特征名不敏感的語言，他...

darcrand 2019-08-23 14:56 評論0 收藏0
vue中8種組件通信方式, 值得收藏!

摘要：一父組件通過的方式向子組件傳遞數(shù)據(jù)，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。之前寫了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動視圖更新的框架, 所以對于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

BicycleWarrior 2019-08-26 10:44 評論0 收藏0
Vue組件——子組件向父組件傳遞數(shù)據(jù)以及路由

摘要：自定義事件我們知道，父組件使用傳遞數(shù)據(jù)給子組件。另外，父組件可以在使用子組件的地方直接用來監(jiān)聽子組件觸發(fā)的事件。為了讓組件可以組合，我們需要一種方式來混合父組件的內(nèi)容與子組件自己的模板。自定義事件我們知道，父組件使用 prop 傳遞數(shù)據(jù)給子組件。但子組件怎么跟父組件通信呢？這個時候 Vue 的自定義事件系統(tǒng)就派得上用場了。使用綁定自定義事件v-on 每個 Vue 實例都實現(xiàn)了事...

CoorChice 2019-08-01 17:58 評論0 收藏0