能详细说一下自定义组件的流程吗?

[laojiangshi]

我按文档注册了组件, 做一个上传的功能. 但不知道怎么把得到的路径返回父级.

[laojiangshi]

能说的详细一点吗
const handleAvatarSuccess: UploadProps['onSuccess'] = (
response, // 实际返回的图片路径
uploadFile
) => {
imageUrl.value = URL.createObjectURL(uploadFile.raw!)
console.log(response)
}

这是我写的上传组件, 确实没明白所说的事件发射.

[laojiangshi]

主要是父传子, 子传父这块,文档实在没看明白, 文档就写了个封装,

[laojiangshi]

咱这个项目 有交流的方式吗?

[laojiangshi]

新做个了组件 图片上传 ImageUpload 已经注册, 不知道在自定义组件里 怎么获取 原来的value 值, 另外得到上传后的路径后,怎么修改这个value 值

[kailong321200875]

我觉得你可以用下插槽会不会更好点。

[laojiangshi]

@kailong321200875 能不能解释下插槽的具体用法 现在返回数据后, 希望能在表单上显示错误, 看文档有插槽, 但不知道具体用法,能不能解释下

[kailong321200875]

@laojiangshi 不是有表单验证吗，只要的返回数据跟表单验证有冲突的话，就会自动显示错误信息了不是吗

[sotiks]

1. 自定义表单项ImageCode：

// 自定义事件sonEvent，表单项事件update:modelValue
const emit = defineEmits(['sonEvent', 'update:modelValue'])
// 适时触发sonEvent事件 从而子调父方法
const triggerEmit = () => {
emit('sonEvent')
}
// props.modelValue,也就是表单项的值，影响校验及表单取值赋值
const props = defineProps({ modelValue: propTypes.string.def('') })

// 控件值更新时通知表单项，反之亦然
watch(
() => props.modelValue,
(val: string) => {
if (val === unref(valueRef)) return
valueRef.value = val
}
)

watch(
() => valueRef.value,
(val: string) => {
emit('update:modelValue', val)
}
)

// 向外部暴露组件的方法
const exposedFunc = ()=>{
console.log('exposed func')
}
defineExpose({ exposedFunc })

2.使用自定义组件ImageCode时：

// 声明formSchema时
{
field: 'code', // 下面获取组件实例用到
colProps: {
span: 24
},
component: 'ImageCode',
componentProps: {
on: {
// 上面声明的自定义事件sonEvent
sonEvent: () => {
console.log('这里父组件方法执行了')
}
}
}
}

// 调用自定义组件暴露出来的方法（父调子方法）
const { formRegister, formMethods } = useForm()
const { getComponentExpose } = formMethods
const cr: ComponentRef<typeof ImageCode> = await getComponentExpose('code')
formData.someKey = cr?.exposedFunc() || ''