将变量传递给组件视图以用作筛选器

// 父组件
<template>
  <div>
    <ChildComponent :filterValue="filterValue" />
  </div>
</template>

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

export default {
  data() {
    return {
      filterValue: 'example',
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

// 子组件 ChildComponent.vue
<template>
  <div>
    <ul>
      <li v-for="item in filteredData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    filterValue: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      data: [
        { id: 1, name: 'example 1' },
        { id: 2, name: 'example 2' },
        { id: 3, name: 'example 3' },
      ],
    };
  },
  computed: {
    filteredData() {
      return this.data.filter(item => item.name.includes(this.filterValue));
    },
  },
};
</script>