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

Question

I am new to VueJs and I am doubtful about passing the optional payload Could anyone please tell me how to pass the value returned by a computed function in the child component to the parent component using the optional payload.

I want to implement a separate independent search component which returns the search results to all other components. The computed function looks like this:

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

This is how I am trying to pass the value returned by computed function to its parent component in the child template:

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

In the parent component, this is how I am trying to access the value of the child's computed function: v-on:computed-sports=""
I am not quite sure how to access the value here. Could anyone help me out in this?

Thanks!

Answer 1

The argument to a v-on should be a method or inline function that takes the payload as an argument. For example

v-on:computed-sports="handleComputedSports"

and your method might be defined

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

There's an example in this section of the documentation . Your emit is fine. The fact that the value comes from a computed makes no difference to anything.