Vue自定义搜索组件v-model绑定后输入框清空，如何将结果传至父组件getData

问题1：输入框被清空的修复方案 #

该问题是自定义组件v-model实现逻辑缺失导致：Vue2中自定义组件使用v-model时，子组件不仅要接收value属性，还需要在输入内容变化时主动触发input事件，将最新值传递给父组件更新绑定变量。你当前的代码没有触发input事件，父组件的nameText一直保持初始空值，导致输入框绑定的valueprop始终为空，看起来就像被清空了。

修改子组件的search方法，在方法开头先同步输入值：

async search(event) {
  // 同步输入值到父组件，保证v-model绑定正常
  this.$emit('input', event.target.value)
  if (event.target.value !== '') {
    const res = await this.callApi('get', 'search' + '?filter=' + event.target.value)
    if (res.status === 200) {
      this.DoubleDATA = res.data;
      // 抛出搜索结果事件，解决第二个问题
      this.$emit('search-success', res.data)
    }
  }
}

问题2：子组件搜索结果传递到父组件的修复方案 #

子组件拿到接口返回结果后通过自定义事件抛出，父组件监听对应事件接收数据存入getData数组即可。

父组件修改后代码： #

<template>
<vue-search v-model="nameText" @search-success="handleSearchSuccess"/>
</template>
<script>
import VueSearch from "./components/tools/VueSearch";

export default {
    data() {
        return {
            nameText: '',
            getData:[]
        }
    },
    components: {
        VueSearch
    },
    methods: {
      handleSearchSuccess(resData) {
        // 直接替换数组内容，如需追加可改用 this.getData.push(...resData)
        this.getData = resData
      }
    }
}
</script>

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