Vue3 子组件获取 v-model 值，如何获取？

Question

父组件代码

<el-form-item label="封面">
  <UploadImgCom v-model="form.imgs"></UploadImgCom>
</el-form-item>

const form = ref<ColumnModel>({});
columnServer.Ishow(id).then((res) => {
  form.value = res.data as ColumnModel;
});

其中 form.imgs 有值

子组件代码

<img v-if="imageUrl" :src="imageUrl" class="avatar" />

const emit = defineEmits(["update:modelValue"]);
const props = defineProps<{ modelValue: string | undefined }>();
const imageUrl = ref(props.modelValue);

问题：我在加载数据的时候，是异步加载，这里出现了，子组件里面，获取不到 form 的值。

注：感觉是我的 server 去异步请求接口，然后 form 没有更新到。因为我在编辑器，更新代码，然后项目自动重新加载，它又可以获取到参数。所以我在想是不是，异步赋值，子组件没有跟着更新的问题！

请问我要想子组件加载 v-model 里的值，我改怎么处理。

上面的方法可以在子主键额外添加一个watch 可以实现更新！

提问题补充

但是同样的代码，为什么我的下拉框就能实现自动选择，就是我的下拉框能正常获取到v-model的值，都在一个页面，form 都是用的同样的值

父组件:

vue:

<el-form-item label="上级栏目">
  <ColumnSidCom v-model="form.sid" placeholder="请选择栏目" :sid="0">/ColumnSidCom>
</el-form-item>

ts:

columnServer.Ishow(id).then((res) => {
  form.value = res.data as ColumnModel;
});

子组件：

vue:

<template>
  <el-select v-model="from" @change="change">
    <el-option
      v-for="item in column"
      :key="item.id"
      :label="item.title"
      :value="item.id"
    />
  </el-select>
</template>

ts:

import type { ColumnModel } from "@/model/column/ColumnModel";
import { ColumnServer } from "@/server/ColumnServer";
import { ref, defineEmits, defineProps } from "vue";
const props = defineProps<{ sid: number }>();
const emit = defineEmits(["update:modelValue"]);
const columnServer = new ColumnServer();
const from = ref();
const column = ref<ColumnModel[]>();
columnServer.getSid(props.sid).then((msg) => {
  column.value = msg.data as ColumnModel[];
});
const change = () => {
  emit("update:modelValue", from.value);
};

Answer 1

也可以试一下computed

const emits  = defineEmits(['update:modelValue'])
const imageUrl = computed({
  get() {
      return props.modelValue.value
   }
  set(newValue){
     emits('update:modelValue', newValue)
  }
})

Answer 2

试试用 reactive

const form = reactive<ColumnModel>({ imgs: '' })
columnServer.Ishow(id).then((res) => {
  Object.assign(form, res.data as ColumnModel)
})

这个属于新增属性没有响应的问题

更新

const emit = defineEmits(["update:modelValue"]);
const props = defineProps<{ modelValue: string | undefined }>();
const imageUrl = ref('');
watch(
    () => props.modelValue,
    newVal => imageUrl.value = newVal,
    { immediate: true }
)

Answer 3

用watch

watch(()=>props.modelValue,val=>{
    imageUrl.value = val;
})