Vue3报selectValue is not defined at d.onUpdate:modelValue.s.＜computed＞.s.＜computed＞

 开发过程中二次封装了一个搜索的组件，子组件内使用了el-select和el-input

参数分别对应父组件传入的selectValue和selectText参数

子组件内部@change和@input事件来同步触发组件中数据的修改

最终本地开发环境一切正常，部署到测试环境和生产环境后出现下方报错：

selectValue is not defined at d.onUpdate:modelValue.s.<computed>.s.<computed>

报错后开始反复查看本地都是没有任何警告的，但是测试环境就是有问题，没有办法只能根据控制台报错找原因，onUpdate:modelValue应该是在子组件内触发父组件修改导致的错误，但是确实给el-select绑定了@change事件。

后续参考Vue官网对于props的介绍，应该是@change事件的触发时机问题，虽然在数据改变后立马进行了emit，但还是不符合vue中props的单向数据流原则，解决方案：

Props | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/guide/components/props.html#one-way-data-flow

• 在子组件内定义两个变量
• 以计算属性的方式在get内第一时间接收父组件传入数据的变化
• 当子组内v-model绑定的数据发生变化时，在set内触发父组件数据更新

原报错代码：

html结构：

    <div class="searchBox">
      <div>
        <el-select
          v-model="selectValue"
          :style="{ width: selectWidth }"
          @change="emit("update:selectValue", selectValue)"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model.trim="searchText"
          @input="emit('update:searchText', searchText.trim())"
          :placeholder="`请输入要查找的${selectLabel}`"
          @keyup.enter="emit('getTemplate')"
        >
        </el-input>
        <el-button type="primary" @click="emit('getTemplate')">搜索</el-button>
      </div>
    </div>

js：

const emit = defineEmits([
  "openDialog",
  "getTemplate",
  "update:selectValue",
  "update:searchText",
]);
const props = defineProps({
  selectValue: String,
  searchText: String,
  showAddBtn: {
    type: Boolean,
    default: true,
  },
  selectWidth: {
    type: String,
    default: "100px",
  },
  options: {
    type: Array,
    default: () => [],
  },
});

后续使用了compute计算属性get/set来触发props数据的修改就解决了问题

修改后代码：html中删除@change和@input事件后，基于上方js代码添加：

//在上面js代码基础上加上
const selectValue = computed({
  get: () => props.selectValue,
  set: (val) => {
    emit("update:selectValue", val);
  },
});

const searchText = computed({
  get: () => props.searchText,
  set: (val) => emit("update:searchText", val),
});