uniapp如何获取自定义导航栏搜索框的信息

如果是自定义导航栏搜索框，就需要在组件中获取搜索框的信息。

一种常用的做法是，在自定义导航栏组件中定义一个事件，当搜索框的值发生变化时，通过该事件将搜索框的值传递给父组件。在父组件中监听该事件，就可以获取搜索框的值了。

具体实现步骤如下：

1. 在自定义导航栏组件中，定义一个事件searchChange，当搜索框的值发生变化时，触发该事件。

<template>
  <view class="nav-bar">
    <view class="search-box">
      <input type="text" v-model="searchQuery" @input="onSearchChange" />
      <button @tap="$emit('search', searchQuery)">搜索</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    onSearchChange() {
      this.$emit('searchChange', this.searchQuery);
    }
  }
}
</script>

<style>
.nav-bar {
  height: 44px;
  background-color: #fff;
}
.search-box {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 100%;
}
.input {
  flex: 1;
  height: 30px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 10px;
}
button {
  margin-left: 10px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background-color: #007aff;
  color: #fff;
  font-size: 14px;
  padding: 0 10px;
}
</style>

2. 在父组件中，引入自定义导航栏组件，并监听searchChange事件，在事件处理函数中获取搜索框的值。

<template>
  <view>
    <custom-navbar @searchChange="onSearchChange" @search="onSearch" />
  </view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar.vue';

export default {
  components: {
    CustomNavbar
  },
  methods: {
    onSearchChange(searchQuery) {
      console.log(searchQuery);
    },
    onSearch(searchQuery) {
      console.log('search:', searchQuery);
    }
  }
}
</script>

其中，onSearchChange方法是searchChange事件的处理函数，当搜索框的值发生变化时，该方法会被调用，并将搜索框的值作为参数传递进来。onSearch方法是当点击搜索按钮时的处理函数，将搜索框的值传递给该方法。