父组件输入框给子组件表格传参的实例

这里提供一个简单的实例，父组件中有一个输入框，输入框中输入的内容会传递给子组件中的表格，并且根据输入框中的内容筛选出符合条件的表格数据进行展示。

父组件：

<template>
  <div>
    <input v-model="searchText" placeholder="请输入关键字"/>
    <table-component :data="filteredData"></table-component>
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue'

export default {
  data() {
    return {
      dataList: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' },
        { name: '赵六', age: 35, gender: '女' },
      ],
      searchText: ''
    }
  },
  computed: {
    filteredData() {
      if (this.searchText) {
        return this.dataList.filter(item => {
          return Object.values(item).some(val => {
            return val.includes(this.searchText)
          })
        })
      } else {
        return this.dataList
      }
    }
  },
  components: {
    TableComponent
  }
}
</script>

子组件：

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.name">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  }
}
</script>

在父组件中，我们使用了一个 `input` 元素，并且使用 `v-model` 指令绑定了 `searchText` 属性，这样就可以实时获取输入框中的内容。然后在计算属性 `filteredData` 中，我们根据 `searchText` 的值对 `dataList` 进行筛选，将符合条件的数据传递给子组件 `TableComponent`。在子组件中，我们通过 `props` 接收了从父组件传递过来的 `data` 数组，并且使用 `v-for` 指令将数据渲染到表格中。这样就完成了父组件输入框给子组件表格传参的功能。