Vue 之子組件向父組件通信

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

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

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

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

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



  
    
    
    
  
  
    
      child name: {{child}}

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

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

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

相關(guān)文章

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

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

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

摘要：本文總結(jié)了組件間通信的幾種方式，如和，以通俗易懂的實(shí)例講述這其中的差別及使用場景，希望對小伙伴有些許幫助。狀態(tài)改變提交操作方法。前言組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(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ù)傳遞直接作為一個(gè)本地變量下面是我的子組件這是父組件給我傳的數(shù)據(jù)運(yùn)行結(jié)果如下圖子組件向父組件傳遞數(shù)據(jù)基本使用子組件向父組件傳遞數(shù)據(jù)，不能像上面一樣實(shí)時(shí)的傳遞數(shù)據(jù)，必須通過事件觸發(fā)。組件是Vue核心功能之一，合理的組件化，可以減少我們代碼的冗余，提高項(xiàng)目的可維護(hù)性。下面，我將由淺入深的講Vue的組件在講之前，首先我們先了解一下組件的命名。 HTML是對特征名不敏感的語言，他...

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

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

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

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

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