到底用prop還是事件

harryhappy 發布于2019-08-20 11:19 / 3038人閱讀

摘要：組件之間數據交互，主要有和事件兩種。如果所對應的任務是在父組件完成的，父組件需要將拿到的一堆數據傳給時，這時可以通過事件來傳遞。

組件之間數據交互，主要有prop和事件兩種。

prop

事件

那如何優雅的選擇呢？
筆者覺得可以在數據功能上進行區分。
比如上面的場景，是由于子組件child在知道id改變后，在它自己的作用域里去執行handler()方法，handler可能是一個需要ajax獲取數據并渲染到child組件上的函數(ajax在child組件中完成的)，這時候就推薦用watch來監聽id的改變了。
如果handler所對應的ajax任務是在父組件完成的，父組件需要將拿到的一堆json數據傳給child時，這時可以通過事件來傳遞。

參考

Vue+Webpack使用規范

云服務器 GPU云服務器云服務器到底干什么用 prop() props prop

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80507.html

VUE防抖與節流的最佳解決方案——函數式組件

摘要：案例持續觸發事件時，并不立即執行函數，當毫秒內沒有觸發事件時，才會延時觸發一次函數。也以函數形式暴露普通插槽。這樣的場景組件用函數式組件是非常方便的。相關閱讀函數式組件自定義指令前言有echarts使用經驗的同學可能遇到過這樣的場景，在window.onresize事件回調里觸發echartsBox.resize()方法來達到重繪的目的，resize事件是連續觸發的這意味著echarts...

OldPanda 2019-05-22 19:08 評論0 收藏0
詳解vue組件三大核心概念

摘要：前言本文主要介紹屬性事件和插槽這三個基礎概念使用方法及其容易被忽略的一些重要細節。至于如何改變，我們接下去詳細介紹單向數據流這個概念出現在組件通信。比如上例中在子組件中修改父組件傳遞過來的數組從而改變父組件的狀態。的一個核心思想是數據驅動。前言本文主要介紹屬性、事件和插槽這三個vue基礎概念、使用方法及其容易被忽略的一些重要細節。如果你閱讀別人寫的組件，也可以從這三個部分展開，它們...

rickchen 2019-08-23 17:51 評論0 收藏0
淺析React之事件系統（一）

摘要：合成事件的使用方式在中不會把所有的事件處理器綁定到相應的真實的節點上，而是使用一個統一的事件監聽器，把所有的事件綁定在最外層。在之前開發者需要為了優化性能需要自己來優化自己的事件處理器的代碼，現在幫助你完成了這些工作。大家周末好，2016年的最后幾篇文章開始寫到了React的一些東西，那么最近就來一些圖表君對于React的簡單總結和理解，那么今天就開始第一篇，說一說React的事件系...

chemzqm 2019-08-20 14:05 評論0 收藏0
[源碼閱讀]通過react-infinite-scroller理解滾動加載要點

摘要：看它的源碼主要意義不在知道如何使用它，而是知道以后處理滾動加載要注意的東西。通過判斷不為的情況，確保滾動組件正常顯示和在無滾動的情況下，和相等，都為在有滾動的情況下，表示實際內容高度，表示視口高度。 react-infinite-scroller就是一個組件，主要邏輯就是addEventListener綁定scroll事件。看它的源碼主要意義不在知道如何使用它，而是知道以后處理滾動加...

cikenerd 2019-08-23 13:41 評論0 收藏0
高階組件HOC - 小試牛刀

摘要：因為這個高階函數，賦予了普通組件一種呼吸閃爍的能力記住這句話，圈起來重點考。其實，高階組件就是把一些通用的處理邏輯封裝在一個高階函數中，然后返回一個擁有這些邏輯的組件給你。原文地址：https://github.com/SmallStoneSK/Blog/issues/6 1. 前言老畢曾經有過一句名言，叫作國慶七天樂，Coding最快樂~。所以在這漫漫七天長假，手癢了怎么辦？于是...

lookSomeone 2019-08-23 12:14 評論0 收藏0