Vue组件使用$emit调用方法无法获取返回值问题求助

问题原因 #

Vue中$emit是单向事件通知机制，仅用于子组件向父组件传递事件触发信号，父组件事件回调的返回值不会自动回传给子组件。未组件化时你直接调用同作用域内的函数，能同步获取返回值；组件化后跨组件调用，这种方式不再生效。

解决方案（推荐使用单向数据流的Props方式） #

1. 子组件修改

• 添加props接收父组件传递的过滤结果
• 模板循环改为使用接收的props数据
• 简化getNames方法仅负责触发事件

<template>
  <div class="mt-1 relative rounded-md shadow-md">
    <input
      v-model="ticker"
      @keydown.enter="addClick"
      @input="getNames"
      type="text"
      name="wallet"
      id="wallet"
      class="block w-full pr-10 border-gray-300 text-gray-900 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm rounded-md"
      placeholder="DOGE"
    />
  </div>
  <div class="flex bg-white shadow-md p-1 rounded-md shadow-md flex-wrap">
    <span
      class="inline-flex items-center px-2 m-1 rounded-md text-xs font-medium bg-gray-300 text-gray-800 cursor-pointer"
      v-for="t of filteredNames"
      :key="t"
      @click="pushName(t)"
    >
      {{ t }}
    </span>
  </div>
</template>

<script>
import addButton from "./addButton.vue";
export default {
  components: {
    addButton,
  },
  props: {
    filteredNames: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ticker: "",
    };
  },
  methods: {
    addClick() {
      this.$emit("add-ticker", this.ticker);
      this.ticker = "";
    },
    getNames(){
      this.$emit("get-name", this.ticker);
    },
    pushName(t) {
      // 补充你的pushName逻辑
    }
  }
}
</script>

2. 父组件修改

• 新增数据存储过滤结果
• 修改getNames方法将结果赋值给本地数据，通过props传递给子组件

<template>
  <add-ticker 
    @get-name="getNames" 
    @add-ticker='addClick'
    :filtered-names="filteredNames" 
  />
</template>

<script>
export default {
  data() {
    return {
      coinNames: [], // 你的原始币种列表
      filteredNames: []
    };
  },
  methods: {
    getNames(ticker) {
      let filtered = this.coinNames.filter((item) =>
        item.toUpperCase().startsWith(ticker.toUpperCase())
      );
      this.filteredNames = filtered.slice(0, 4);
    },
    addClick(ticker) {
      // 你的添加逻辑
    }
  }
}
</script>

其他可选方案（事件回传） #

如果不想用Props，也可以通过父组件主动向子组件发送事件传递结果：

1. 子组件添加filteredNames数据，并监听names-fetched事件：

data() {
  return {
    ticker: "",
    filteredNames: []
  };
},
mounted() {
  this.$on('names-fetched', (names) => {
    this.filteredNames = names;
  });
}

2. 父组件给子组件添加ref，处理完过滤后触发子组件事件：

<add-ticker ref="addTicker" @get-name="getNames" @add-ticker='addClick' />

getNames(ticker) {
  let filtered = this.coinNames.filter((item) =>
    item.toUpperCase().startsWith(ticker.toUpperCase())
  );
  const result = filtered.slice(0, 4);
  this.$refs.addTicker.$emit('names-fetched', result);
}

内容的提问来源于stack exchange，提问作者fetixzz