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

文档的本节中有一个示例。 你的发射很好。 值来自计算的事实对任何事情都没有影响。