在vue中父组件怎么把查询条件传入子组件

在 Vue 中，可以通过 props 向子组件传递数据。具体步骤如下：

1. 在子组件中定义 props：

props: {
  query: {
    type: Object,
    required: true
  }
}

2. 在父组件中使用子组件时，将查询条件作为 props 传递给子组件：

<template>
  <div>
    <child-component :query="query"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      query: {
        keyword: '',
        category: 'all'
      }
    }
  }
}
</script>

在上述代码中，父组件的 data 中定义了查询条件 query，然后将其作为 props 传递给子组件。

3. 在子组件中使用 props：

<template>
  <div>
    <input v-model="keyword" placeholder="关键词">
    <select v-model="category">
      <option value="all">全部分类</option>
      <option value="books">图书</option>
      <option value="electronics">电子产品</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    query: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      keyword: this.query.keyword,
      category: this.query.category
    }
  },
  watch: {
    query(newVal) {
      this.keyword = newVal.keyword
      this.category = newVal.category
    }
  }
}
</script>

在子组件中，使用 props 定义了一个名为 query 的对象类型的属性，然后在 data 中初始化了关键词和分类，将关键词和分类与 props 中的值保持同步。同时，使用 watch 监听 props 中的变化，以保证子组件能够及时响应父组件传递的查询条件的变化。