VueJs：如何使用 $emit(optionalPayload) 和 $on 将“计算函数”值从子组件传递给父组件？

Posted 2023-02-22

【中文标题】VueJs：如何使用 $emit(optionalPayload) 和 $on 将“计算函数”值从子组件传递给父组件？

【英文标题】：VueJs: How to pass a 'computed function' value from child component to the parent component using $emit(optionalPayload) and $on?

【发布时间】：2018-08-29 18:08:47

【问题描述】：

我是 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="" 我不太确定如何在此处访问该值。谁能帮我解决这个问题？

谢谢！

【参考方案1】：

v-on 的参数应该是一个将有效负载作为参数的方法或内联函数。例如

v-on:computed-sports="handleComputedSports"

您的方法可能已定义

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

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