父组件拿不到子组件方法
先理解原理和示例,再练习完整口述与追问。
回答要点
实例就绪;受限公开接口;版本差异。
原理拆解
父级通过 ref 调用子方法,前提是子实例或元素已挂载、方法确实对外暴露,而且当前 ref 对应正确实例。v-if、异步组件、循环和缓存都会影响 ref 的可用性。事件通知通常更符合单向流,但聚焦、重置等命令式能力可以明确暴露。
示例与推演
Vue2 的普通实例方法可在挂载后通过组件 ref 使用;Vue3 script setup 默认不把所有变量公开,需要 defineExpose。父级打开条件分支后先 nextTick,再检查引用;React 函数组件暴露命令能力要按版本使用 ref 与 useImperativeHandle 等契约。
易错点
不要用循环 setTimeout 不断重试直到方法出现。应等待明确 ready、挂载或加载结果,失败时展示可解释状态。
参考回答可直接练习口述
先确认子组件已挂载且条件分支存在,再访问 ref,异步组件还需明确就绪。Vue3 script setup 默认不会把所有内部方法公开,可用 defineExpose 暴露必要能力;Vue2 用实例方法也要控制耦合。React 旧版本可用 forwardRef 配合 useImperativeHandle,React19 可接 ref prop。优先数据与事件契约,聚焦等才使用命令式接口。