vue2写一个搜索组件，组件有element表单组件如el-input、el-select等，搜索参数和组件类型由父组件传入，查询参数由父组件传入，用户选择下拉框，展示查询参数，没有选择择不展示，传入参数可以判断是否需要校验规则，点击搜索把参数键和值都返回给父组件，完整代码

在 Vue 2 中，创建这样一个搜索组件，你可以结合 Element UI 的 `el-form`, `el-input`, 和 `el-select` 组件来实现。首先，你需要安装 Element UI，然后按照以下步骤编写组件代码：

<template>
  <el-form ref="form" :model="searchParams" :rules="validationRules" @submit="onSubmit">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input v-model="searchParams.keyword" placeholder="搜索关键字"></el-input>
      </el-col>
      <el-col :span="8">
        <el-select v-model="selectedType" placeholder="选择类型">
          <el-option
            v-for="typeOption in componentTypes"
            :key="typeOption.value"
            :label="typeOption.label"
            :value="typeOption.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="search">搜索</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { ElForm, ElFormItem } from "element-ui";

export default {
  name: "SearchComponent",
  props: {
    queryParameters: {
      type: Object,
      default: () => ({})
    },
    componentTypes: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      searchParams: {
        keyword: "",
        selectedType: ""
      },
      validationRules: {
        keyword: [{ required: true, message: "请输入搜索关键字", trigger: "blur" }]
      }
    };
  },
  methods: {
    onSubmit() {
      if (this.$refs.form.validate()) {
        const params = {
          keyword: this.searchParams.keyword,
          selectedType: this.selectedType
        };
        this.$emit("search", params);
      }
    },
    search() {
      // 如果不需要校验，直接调用父组件的回调函数
      if (!this.validationRules.keyword.required) {
        this.$emit("search", this.searchParams);
      }
    }
  }
};
</script>

在这个例子中，我们设置了 `searchParams` 数据来保存用户的输入，并根据父组件传递的 `componentTypes` 列表动态渲染下拉框。当用户点击搜索按钮时，如果验证通过，会触发 `onSubmit` 方法并通过 `$emit` 事件将搜索参数发送给父组件。