根据过滤父组件中的数据刷新子组件中的表

<!-- 父组件 -->
<template>
  <div>
    <input type="text" v-model="filterValue" @input="filterData" />
    <child-component :filteredData="filteredData"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
        { name: 'Bob', age: 35 }
      ],
      filterValue: '',
      filteredData: []
    };
  },
  methods: {
    filterData() {
      this.filteredData = this.data.filter(item => item.name.includes(this.filterValue));
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: ['filteredData']
};
</script>