How to expose the expose method inside the element plus el input component for secondary encapsulation.

[gaylen1]

Vue version

3.3

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-vy4po5?file=src%2FApp.vue,src%2Fcomponents%2Ft-input.vue,src%2Fmain.js&terminal=dev

Steps to reproduce

Please refer to the link

What is expected?

How to solve this problem

What is actually happening?

nothing

System Info

No response

Any additional comments?

No response

[gaylen1]

请问这种需要对子组件ref进行转接应该怎么解决。

[gaylen1]

按理来说暴露子组件ref应该不需要放到onMounted方法下的，想recat框架就提供了React.forwardRef来实现。

[L0st1]

不知道是不是这样 https://stackblitz.com/edit/vitejs-vite-8y3sjm?file=src%2FApp.vue
可以看下 defineExpose 和 nextTick,DOM更新时机
但最好先看下组件的生命周期

[gaylen1]

我看了修改后的代码，只是将值提供一个方法对外访问。

这个是控制台打印

控制台打印的这个方法是el-input组件提供的，我对他进行了二次封装那么我也需要将这些方法再次对外暴露。
应该如何实现。
https://stackblitz.com/edit/vitejs-vite-purpxv?file=src%2Fcomponents%2Ft-input.vue,src%2FApp.vue
麻烦再这个demo实现一下。谢谢。

[L0st1]

https://stackblitz.com/edit/vitejs-vite-u7bg4n?file=src%2Fcomponents%2Ft-input.vue,src%2FApp.vue

https://cn.vuejs.org/guide/essentials/template-refs.html#ref-on-component

[gaylen1]

谢谢！谢谢！

[gaylen1]

在打扰一下，麻烦了。
我觉得你的这个方案虽然通过getValues拿到了所有方法

但是与我的想法不一致了
我们需要的是inputRef.value.focus()而不是inputRef.value.getValues().focus()
你可以百度搜索一下大家对这个组件二次封装都是我这个想法。但是偏偏这里不支持。