怎么把上述组件渲染到页面上，并且在用户选择控制模式并点击查询按钮时获取选中项的值并发送到后端。

好的，让我来解释一下如何把这个组件渲染到页面上，并且在用户选择控制模式并点击查询按钮时获取选中项的值并发送到后端。

首先，您需要在前端框架中定义这个组件，例如在Vue中可以这样定义：

<template>
  <div>
    <label>{{ label }}</label>
    <select v-model="selected" @change="handleChange">
      <option v-for="option in options" :value="option.value">{{ option.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    placeholder: String,
    bindKey: String,
    options: Array,
    customRender: Function
  },
  data() {
    return {
      selected: ''
    }
  },
  methods: {
    handleChange() {
      this.$emit('change', this.selected)
    }
  }
}
</script>

这个组件包含了一个下拉菜单和相应的事件处理函数，它会在用户选择控制模式时更新选中项的值，并在用户点击查询按钮时将选中项的值发送到后端。

接下来，您需要在页面中使用这个组件，例如在Vue中可以这样使用：

<template>
  <div>
    <ControlModeSelect :label="'控制模式'" :options="options" :bindKey="'control'" @change="handleControlModeChange" />
    <button @click="handleQueryClick">查询</button>
  </div>
</template>

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

export default {
  components: {
    ControlModeSelect
  },
  data() {
    return {
      options: [
        { name: '自动', value: '1' },
        { name: '手动', value: '0' }
      ],
      controlMode: ''
    }
  },
  methods: {
    handleControlModeChange(value) {
      this.controlMode = value
    },
    handleQueryClick() {
      // 发送请求到后端
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/api/data?mode=" + this.controlMode);
      xhr.send();
    }
  }
}
</script>

这个页面包含了一个ControlModeSelect组件和一个查询按钮，当用户选择控制模式时，选中项的值会被绑定到controlMode变量中，当用户点击查询按钮时，会发送GET请求到后端。

需要注意的是，这里的ControlModeSelect组件是在本地定义的，您需要根据实际情况进行修改或替换。同时，您需要根据实际情况修改发送请求的URL和参数。