uniapp动态修改searchInput

要动态修改自定义导航栏搜索框的值，可以使用Vue.js提供的响应式数据，将搜索框的值保存在data中，然后通过v-model指令将搜索框的值与data中的值进行绑定。当需要动态修改搜索框的值时，只需要修改data中的值即可。

具体实现步骤如下：

1. 在自定义导航栏组件中，将搜索框的值保存在data中，并使用v-model指令将搜索框的值与data中的值进行绑定。

<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 :searchQuery="searchQuery" @searchChange="onSearchChange" @search="onSearch" />
  </view>
</template>

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

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

其中，searchQuery是动态修改的搜索框的值，将searchQuery作为props传递给自定义导航栏组件，并使用v-model指令绑定搜索框的值。当searchChange事件被触发时，会调用onSearchChange方法，动态修改searchQuery的值。当点击搜索按钮时，会调用onSearch方法，获取最终的搜索框的值。