It seems that directly replicating React's ref in Vue is not feasible. In Vue, the ref attribute is simply a string used to establish a reference to a child component within the parent's $refs object during rendering.
If you refer to the documentation links here: documentation & documentation
In essence, it involves an inverted logic where instead of passing a reference from parent to child like in React, Vue retrieves the reference from the child component into the parent component. This currently does not allow for creating grandchild references as needed.
However, there are workarounds available:
1. A quick and slightly messy solution would involve:
Within the parent component using the el-form-responsive, on the mounted hook, replace the original child reference with the grandchild reference.
The template of your el-form-responsive component:
<el-form ref="elform">
The template of the parent utilizing your el-form-responsive:
<el-form-responsive ref="form">
Script:
...
mounted () {
this.$refs.form = this.$refs.form.$refs.elform
}
Now, this.$refs.form points to the grandchild <el-form>
2. A more intricate but potentially better method could be:
To enhance transparency, expose certain methods and properties from the child el-form component to any possible parent component.
el-form-responsive Template:
<el-form ref="elform">
Script:
export default {
data: () => ({
whatever: null
}),
mounted () {
this.whatever = this.$refs.elform.whatever
},
methods: {
submit () {
this.$refs.elform.submit()
}
}
}
Hence, within a parent component, el-form-responsive can be utilized like so:
<el-form-responsive ref="form">
...
mounted () {
const formWhatever = this.$refs.form.whatever // fetching `whatever` from `el-form`
this.$refs.form.submit() // eventually triggers submit on `el-form`
},