vue3 steup 子组件修改父组件值俩种方式。

方法一：直接修改不需要注册方法来修改

方法二 ：通过常规的注册方法来修改

父组件

 <el-form-item label="客户名称" prop="source">
     <AutoSelect v-model:value.sync="warehousingForm.source" :selectList="DetailsAssistData.getCustomerNameList" placeholder="客户名称"   @SelechChange="SelechChange" />
  </el-form-item>
  <el-form-item label="来源车辆" prop="carNo">
      <AutoSelect v-model:value="warehousingForm.carNo" :selectList="DetailsAssistData.getDriverCarNoList" placeholder="来源车辆"  />
  </el-form-item>

<script lang="ts" setup name="warehousingorder">
// 查看新增入库
let warehousingForm = reactive<object>({
    source:"",       // 客户名称
    carNo:"",        // 车辆
});

// 客户名称监听
const SelechChange = (val)=>{
    // 赋值
    warehousingForm.source = val;
};
</script>

子组件

<template>
 <div class='MainBox'>
    <el-select 
       v-model="selectValue" 
       :size="size"
       filterable  
       allow-create 
       default-first-option 
       :placeholder="placeholder" 
       @blur="((e,name)=>{BlurCuster(e,'source')})" 
       
       @change="ChangeCuster">
        <el-option :label="item.label" :value="item.value" v-for="(item,index) in selectList" :key="index"/>
    </el-select>
 </div>
</template>

<script setup lang='ts'>
import { watch } from "vue";

let props = defineProps({
    value:{                            // 父组件v-model绑定的值
        type:String,
    },
    selectList:{                    // 父组件传递的下拉列表
        type:Array,
        default:[],
    },
    size:{
        type:String,
        default:"small",
    },
    placeholder:{
        type:String,
        default:"请选择",
    },
});


const emit = defineEmits(['SelechChange', "update:value"]);

let selectValue = $ref(props.value);


// change
const ChangeCuster = (val)=>{
    // 方法一   自动更新父组件传值同时修改父组件值。
    emit('update:value', val)
  
    //  方法二   传给父组件方法更新值
    emit('SelechChange', val)
};

// blur
const BlurCuster = (e,name)=>{
    let result =  e.target.value;
    if(result != "" && result != null){
        selectValue = result;
        
        // 自动更新父组件传值
        emit('update:value', selectValue)

        // 传给父组件方法更新值
        emit('SelechChange', selectValue)
    }
};

// 当值发生变化，更新值
watch(
    () => props.value,
    (newValue, oldValue) => {
        selectValue = newValue;
    },
    {
      immediate:true,              // 深度监听
    }
);

</script>
<style lang='scss' scoped>
.MainBox{


}
</style>