Add forwardRef API to make it possible let component handle ref itself #258
Comments
This issue is to talk about we need to add the And what do you mean by "vue ref is better than react ref"? |
|
The biggest challenge about manually implementing a behavior similar to However, as mentioned in vuejs/composition-api#317, you can pass a closure as a prop to work around that: It can even be refactored into an util function: The second biggest challenge is that you can't have a prop named However, I'm not sure if something like |
Yeah, we do will face these problems. But the const NewButton = logProp('type')(Button)
As the developer of |
Vue already handles the forwarding of the The part that Vue still doesn't support natively is letting the user manually handle the |
Due to the limitation of functional component, it only solve part of problem. |
|
@Jokcy maybe we can use expose to achieve it. function useForwardRef() {
const instance = getCurrentInstance()!
function handleRefChange(realRef: any) {
instance.exposed = realRef
instance.exposeProxy = realRef
}
return handleRefChange
}the example: const A = defineComponent({
props: {
size: String as PropType<'small' | 'large' | 'middle'>,
},
setup(props, ctx) {
const originExpose = {
focus() {
console.log('focus')
},
}
ctx.expose(originExpose)
return () => <div>my size is {props.size}</div>
},
})
function createSizeA(size: 'small' | 'large' | 'middle') {
return defineComponent((props, ctx) => {
const handleRef = useForwardRef()
return () => <A {...ctx.attrs} size={size} ref={handleRef}></A>
})
}
const LargeA = createSizeA('large')
export default class HelloWorldView extends VueComponent {
aRef = ref()
@Hook('Mounted')
mounted() {
this.aRef.value?.focus()
console.log(this.aRef.value)
}
render() {
return <LargeA ref={this.aRef}></LargeA>
}
} |
|
Perhaps, instead there could be both <MyComponent e-ref="elMyComponent" c-ref="cmpMyComponent" />
<component :name="genericComponentName" e-ref="elGenericComponent" c-ref="cmpGenericComponent" /> |
|
So far I use <textarea
:ref="el => emit('e-ref', el as HTMLTextAreaElement)"
...and <CTextArea
@e-ref="el => (elDetails = el)"
... |
|
I would also like to add a forwardRef method, so that UI components can be unified to expose DOM operations, or have an extra property like C-ref, but it has to be official, which would be a great help in developing a Vue library |
|
Especially when using the Script Setup syntax, we don't expose anything by default, but as a consumer, I can't expect all components to expose me a DOM |
|
I believe that child component should control itself's expose, but if there is only one root element, "custom element" may help. There is a example to use "expose" or "custom directive" to get root element. |
|
I think it's good to keep the original. value writing |
React will Deprecate
|
|
@sadeghbarati can you please give a proof link? |
When we pass ref to a component or DOM element, the ref will point to component instance or DOM element which handled by Vue internally.
In some case we may want to handle ref ourself. For example, if I want wrapper a Input component but just want to handle some logic when use input. I maight do:
At this case I don't want the ref passed to the component just point to the component instance because it's nothing there. I want to point the ref to the real input DOM element, by now I did not find any way to implement this.
Maybe we need to add some api like
forwardRefin React, or add anforwardRefoption when defineComponent. Then Vue pass the ref handler into thesetupmethod, so that we can handle ref ourself.The text was updated successfully, but these errors were encountered: