在vue3中父组件如何把查询条件下的数据传给子组件

在Vue 3中，可以使用Props将父组件中的数据传递给子组件。首先，将查询条件下的数据定义在父组件中，可以使用一个响应式对象或者一个响应式数组来存储这些数据，例如：

<template>
  <div>
    <input type="text" v-model="searchText">
    <button @click="search">Search</button>
    <child-component :search-results="searchResults" />
  </div>
</template>

<script>
import { reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const state = reactive({
      searchText: '',
      searchResults: []
    });

    function search() {
      // perform search using state.searchText and update state.searchResults
    }

    return {
      searchText: state.searchText,
      searchResults: state.searchResults,
      search
    };
  }
};
</script>

然后，在子组件中通过Props接收这些数据：

<template>
  <div>
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    searchResults: {
      type: Array,
      required: true
    }
  }
};
</script>

这样，当父组件中的查询条件下的数据发生改变时，子组件中的Props也会跟着更新。同时，子组件也可以通过emit事件向父组件传递数据，让父组件知道子组件的操作。