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);
}

this section of the documentation中有一个例子。你的排放很好。值来自计算的事实对任何事都没有影响。