Vue.js选择位置列表项后输入框文本不跟随searchText更新如何解决

你的SearchInput组件仅在初始化时将传入的value prop赋值给了内部的input响应式变量，没有监听该prop的后续更新，所以父组件的searchText变化时，输入框内部的值不会同步更新。

方案1：新增监听器同步prop更新（改动最小） #

修改SearchInput.vue的脚本部分，添加对value prop的监听逻辑：

<!-- SearchInput.vue -->
<script setup>
// 先声明接收的props，你原有代码缺失这部分
const props = defineProps(['value', 'type', 'fieldName', 'placeholder'])
const input = ref('')

// 监听外部传入的value变化，同步到内部输入框值
watch(() => props.value, (newVal) => {
  input.value = newVal
}, { immediate: true }) 
// immediate设为true时，组件初始化就会执行赋值逻辑，你原有单独的初始化赋值函数可以直接删除
</script>

方案2：标准双向绑定实现（推荐，适配v-model语法） #

如果你需要同时支持用户手动输入内容同步到父组件，可以直接按Vue标准v-model规范改造，不需要额外维护内部变量的初始化逻辑：

第一步：改造SearchInput.vue #

<!-- SearchInput.vue 脚本 -->
<script setup>
const props = defineProps(['modelValue', 'type', 'fieldName', 'placeholder'])
const emit = defineEmits(['update:modelValue'])

// 用计算属性做双向绑定中转，符合单向数据流规范
const input = computed({
  get() {
    return props.modelValue
  },
  set(newVal) {
    emit('update:modelValue', newVal)
  }
})
</script>

<!-- 模板部分无需改动，还是v-model="input" -->

第二步：修改父组件绑定方式 #

父组件Search.vue中引用SearchInput的地方改为用v-model绑定：

<SearchInput :type="'text'" v-model="searchText"/>

改造完成后，不管是用户手动输入，还是点击选项修改searchText，输入框的值都会自动同步。

内容的提问来源于stack exchange，提问作者thelandog