//父组件
export default defineComponent({
setup() {
type stateType = {
childRef: any
}
const state: stateType = reactive({
childRef: null
})
//使用
function submit() {
state.childRef.xxx子组件ref中的方法
}
return () => (
<div>
<Child refCallback={(ref: any) => state.childRef= ref} />
<button on-click={() => submit()}/>
</div>
)
}
})
//子组件
const Child = defineComponent({
props: ["refCallback"]
setup(props) {
return () => (
<Form ref={props.refCallback}>
</Form>
)
}
})
vue3+tsx父组件调用子组件中的ref
本文介绍了如何在Vue应用中通过`ref`和`refCallback`实现父子组件间的交互,重点讲解了`state.childRef`的使用以及在`submit`方法中调用子组件ref的方法。通过实例展示了如何在``组件中传递回调并保持引用状态。
摘要由CSDN通过智能技术生成