VueJs：如何使用 $emit(optionalPayload) 和 $on 將“計算函數”值從子組件傳遞到父組件？

Question

我是 VueJs 的新手，我對傳遞可選有效負載持懷疑態度 誰能告訴我如何使用可選有效負載將子組件中的計算函數返回的值傳遞給父組件。

我想實現一個單獨的獨立搜索組件，它將搜索結果返回給所有其他組件。 計算函數如下所示：

get computedSports () {
    if (!this.searchModel || this.searchModel.length === 0)
       return this.sports
    else
       return this.fuseSearch.search(this.searchModel)
}

這就是我試圖將計算函數返回的值傳遞給子模板中的父組件的方式：

@input="$bus.$emit('computed-sports', computedSports)"

在父組件中，這就是我嘗試訪問子計算函數值的方式： v-on:computed-sports=""
我不太確定如何在此處訪問該值。 誰能幫我解決這個問題？

謝謝！

Answer 1

v-on的參數應該是一個將有效負載作為參數的方法或內聯函數。 例如

v-on:computed-sports="handleComputedSports"

並且您的方法可能已定義

handleComputedSports(theValue) {
  console.log("The value is", theValue);
}

文檔的本節中有一個示例。 你的發射很好。 值來自計算的事實對任何事情都沒有影響。