vue 子组件过滤父组件数据

为了在Vue中过滤父组件数据，可以使用插槽（slot）和props属性。以下是一个简单的例子：

在父组件中，我们可以定义一个数据列表，并将其传递给子组件：

<template>
  <div>
    <child-component :items="items">
      <template v-slot:filter="{ item }">
        <div v-if="item.price > 100">{{ item.name }}</div>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      items: [
        { name: 'item1', price: 50 },
        { name: 'item2', price: 150 },
        { name: 'item3', price: 200 },
      ],
    };
  },
};
</script>

在子组件中，我们可以使用插槽来过滤父组件传递的数据：

<template>
  <div>
    <div v-for="item in filteredItems" :key="item.name">
      <slot name="filter" :item="item" v-if="!enableFilter || $slots.filter"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
    enableFilter: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    filteredItems() {
      if (!this.enableFilter || !$slots.filter) {
        return this.items;
      }

      return this.items.filter((item) => {
        return this.$scopedSlots.filter({ item });
      });
    },
  },
};
</script>

在这个例子中，我们定义了一个名为“filter”的插槽，并将其传递给子组件。在子组件中，我们使用v-for指令遍历过滤后的数据，并使用v-if指令来判断是否需要显示该项数据。如果插槽不存在或者enableFilter属性为false，则显示所有数据。