如何从子组件向父组件传递filterItems计算属性数据？

嘿，这个需求很常见，咱们来聊聊怎么合理地实现它～首先得说：直接从父组件硬读子组件的计算属性不是Vue推荐的做法，因为这会破坏组件的封装性，尤其你还要复用这个子组件，耦合太高以后不好维护。不过有几种合规的方案能达到你的目的，我给你拆解一下：

如果你的筛选逻辑只依赖父组件传过来的items和搜索关键词search，那完全可以把筛选逻辑拿到父组件里来。这样子组件只负责渲染数据，不用管筛选，复用性反而更高——毕竟其他组件用它的时候，只需要传要渲染的列表就行。

举个具体的例子：
父组件里添加计算属性：

<script>
export default {
  data() {
    return {
      search: '',
      items: []
    }
  },
  computed: {
    filterItems() {
      // 这里写你原来子组件里的筛选逻辑，比如根据search过滤items
      return this.items.filter(item => item.title.toLowerCase().includes(this.search.toLowerCase()))
    }
  }
}
</script>

然后把筛选后的filterItems传给子组件：

<template>
  <input class="form-control form-control-search m-input" autocomplete="off" type="text" v-model="search" placeholder="Search...">
  <paginate-links v-if="filterItems.length > 0" :models="filterItems">
    <div class="m-list-timeline__item no-timeline" v-for="item in filterItems" :key="item.id">
      {{ item.title }}
    </div>
  </paginate-links>
</template>

这样父组件自己就拥有了筛选后的列表，完全不用依赖子组件的计算属性，子组件也能安心做渲染的活儿，复用起来毫无压力。

如果筛选逻辑必须放在子组件里（比如子组件有自己的私有状态会影响筛选结果），那可以让子组件在filterItems变化时，通过自定义事件把结果“主动”传给父组件。

子组件代码调整：

<script>
export default {
  props: ['items', 'search'], // 假设子组件接收父组件的items和search
  computed: {
    filterItems() {
      const filtered = // 你的筛选逻辑代码
      // 每当筛选结果变化，就触发自定义事件把结果传出去
      this.$emit('filtered-items-updated', filtered)
      return filtered
    }
  }
}
</script>

父组件里监听这个事件，把结果存到自己的data中：

<template>
  <input class="form-control form-control-search m-input" autocomplete="off" type="text" v-model="search" placeholder="Search...">
  <!-- 给子组件加事件监听 -->
  <your-child-component :items="items" :search="search" @filtered-items-updated="saveFilteredItems">
    <!-- 子组件的插槽内容 -->
  </your-child-component>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      items: [],
      filteredItems: [] // 用来存子组件传过来的筛选结果
    }
  },
  methods: {
    saveFilteredItems(filteredData) {
      this.filteredItems = filteredData
      // 这里就可以用filteredData做你想做的操作了
    }
  }
}
</script>

这种方式既保留了子组件的封装性，又能让父组件拿到筛选结果，子组件复用的时候，其他父组件只要监听同一个事件就行，非常灵活。

虽然技术上可以通过ref直接读取子组件的计算属性，但这会让父组件和子组件强耦合——如果以后子组件改了filterItems的名字，父组件就会直接报错，而且其他复用这个子组件的地方也要跟着改，维护成本很高。

如果实在要这么做，代码是这样的：
父组件给子组件加ref：

<your-child-component ref="filterComponent" :items="items" :search="search"></your-child-component>

然后在需要的方法里访问：

<script>
export default {
  methods: {
    testFunc() {
      // 确保子组件已经挂载完成，所以在input事件里调用是安全的
      const filteredItems = this.$refs.filterComponent.filterItems
      // 用这个结果做操作
    }
  }
}
</script>

再次强调：尽量不要用这个方案，除非你确定子组件的结构永远不会变，而且不会被其他组件复用。

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