鍍金池/ 問答/HTML/ vue 開發(fā)組件的時候需要外部提供一個函數(shù)，哪種實現(xiàn)方式比較好？

vue 開發(fā)組件的時候需要外部提供一個函數(shù)，哪種實現(xiàn)方式比較好？

vue中，當(dāng)我們定義了一個組件compA，compA中需要一個外部函數(shù)，那比較好的做法是通過props傳遞 還是 compA中emit('eventName')，然后引用compA的頁面這樣寫：<comp-a @eventName=""></comp-a>
哪種更合適呢？

我參考了elemnt-ui 的 table組件 http://element-cn.eleme.io/#/...，發(fā)現(xiàn)它以上兩種情況都有。比如sort-method，是以props的方式傳遞一個函數(shù)。當(dāng)然，更多的事件函數(shù)還是通過emit的方式，也不知道他們的考量標(biāo)準(zhǔn)是什么 ？

回答
編輯回答
陌上花

其他的樓上都說完了 我做個愚蠢的補(bǔ)充
其實有個決定性因素是 這個函數(shù)到底會在執(zhí)行途中需要哪個域的值

prop 從父傳到子
emit 從子傳到父

例如說子組件是一個保存按鈕 它需要一個功能是點擊保存后顯示加載中 并在保存完畢顯示回保存

那么 由于這個功能需要更改子組件自身的按鈕上的文字 所以 應(yīng)該由父組件prop下來一個save function 讓子組件能在使用時方便的更改自己的狀態(tài)

再例如 又是這個按鈕 它還需要實行一個功能 點擊后根據(jù)輸入框里的關(guān)鍵字進(jìn)行搜索 由于輸入框跟按鈕明顯是兩個組件 是父組件讓他們聯(lián)系在一起的 所以 這個點擊應(yīng)該是一個emit 讓子組件通知父組件 啊 我這里被點擊啦 然后父組件再根據(jù)輸入框內(nèi)容進(jìn)行搜索

2018年4月3日 17:56
編輯回答
貓小柒

我的理解是
props屬于父->子
$emit屬于子->父
props：我需要你使用這個值，函數(shù)屬于子組件執(zhí)行流程中的組成部分。
$emit：我通知你這個事情發(fā)生了，算是結(jié)果，后面的回調(diào)執(zhí)行不屬于子組件。

可能$emit大多是用來告知結(jié)果的吧，后續(xù)操作我不關(guān)心，函數(shù)怎么執(zhí)行屬于父組件的邏輯。

2017年4月11日 11:07
編輯回答
乖乖噠

謝邀。
prop和@eventName使用的場景不同吧。。

  1. prop傳遞一個函數(shù)到子組件，是因為這個函數(shù)是需要在子組件中執(zhí)行，并且在父組件聲明的場景。比如你的table排序，肯定是需要在子組件進(jìn)行處理的，而排序的方法需要你自己定義...因此prop傳遞一個函數(shù)下去。
  2. @eventName的場景，是在子組件觸發(fā)一個事件，在父組件執(zhí)行對應(yīng)的事件函數(shù)，所以函數(shù)是在父組件執(zhí)行的。比如在子組件執(zhí)行完某些參數(shù)后讓父組件執(zhí)行回調(diào)函數(shù)...
2018年4月2日 11:09