Vue.js新手求教：如何通过$emit传递子组件计算属性值给父组件

嘿，别担心，这事儿其实很容易搞定！我来一步步教你怎么用Vue的$emit把你子组件里的computedSports值传给父组件，完美实现你的搜索组件需求～

第一步：子组件里触发$emit传递载荷 #

首先，你需要在子组件里，当computedSports的值更新时，调用$emit把这个值发出去。因为computed属性是响应式的，我们可以用watch来监听它的变化，一旦变化就触发事件：

<template>
  <div class="search-component">
    <!-- 假设这是你的搜索输入框 -->
    <input 
      v-model="searchModel" 
      placeholder="搜索运动项目"
      type="text"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchModel: '',
      sports: ['足球', '篮球', '羽毛球', '乒乓球'] // 你的原始运动数据
    }
  },
  computed: {
    computedSports() {
      if (!this.searchModel || this.searchModel.length === 0) {
        return this.sports
      } else {
        // 补全你的过滤逻辑，比如按关键词匹配
        return this.sports.filter(sport => 
          sport.toLowerCase().includes(this.searchModel.toLowerCase())
        )
      }
    }
  },
  watch: {
    // 监听computed值的变化，实时触发emit
    computedSports(newSearchResult) {
      // 第一个参数是自定义事件名（随便取，只要父组件能对应上），第二个就是要传的载荷
      this.$emit('search-result-updated', newSearchResult)
    }
  }
}
</script>

当然，你也可以直接在输入框的input事件里触发emit，比如给input加@input="sendSearchResult"，然后在methods里写：

methods: {
  sendSearchResult() {
    this.$emit('search-result-updated', this.computedSports)
  }
}

两种方式都能实现实时传递结果，选你觉得顺手的就行～

第二步：父组件监听事件接收数据 #

接下来，在父组件里引用你的搜索子组件，然后通过@自定义事件名来监听子组件的emit，在对应的方法里接收传递过来的结果：

<template>
  <div class="parent-component">
    <!-- 引用子组件，监听自定义事件 -->
    <SearchComponent @search-result-updated="handleSearchResult" />
    
    <!-- 展示从子组件传过来的搜索结果 -->
    <div class="search-results">
      <h3>搜索结果：</h3>
      <ul>
        <li v-for="sport in filteredSports" :key="sport">{{ sport }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
// 导入你的搜索子组件
import SearchComponent from './SearchComponent.vue'

export default {
  components: {
    SearchComponent
  },
  data() {
    return {
      filteredSports: [] // 用来存子组件传过来的结果
    }
  },
  methods: {
    handleSearchResult(result) {
      // 把子组件传过来的结果赋值给父组件的变量
      this.filteredSports = result
      // 这里还可以做其他操作，比如分页、统计数量之类的
    }
  }
}
</script>

关键点总结 #

• $emit的第一个参数是自定义事件名称（父子组件要保持一致，比如我这里用的search-result-updated），第二个参数就是你要传递的载荷数据（也就是你的computedSports值）。
• 父组件通过@事件名绑定监听函数，就能拿到子组件传过来的数据啦。
• 因为computed是响应式的，所以只要搜索关键词变化，computedSports就会更新，我们的watch或者input事件就能实时把最新结果传给父组件。

这样你的独立搜索组件就能完美把结果返回给父组件了～

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