when using custom components to use ref, an error is found.
when correct: click the button input box focus
<div id="L4">
<ref-component>
</ref-component>
</div>
<script>
Vue.component("ref-component",{
template:`
<div>
<input ref="name" type="text">
<button @click="focus">fouce</button>
</div>
`,
methods:{
focus:function(){
this.$refs.name.focus()
}
}
})
new Vue({
el:"-sharpL4"
})but if the button event is executed when the input box is written to a subcomponent, an error will be reported
<div id="L4">
<ref-component>
</ref-component>
</div>
<script>
Vue.component("ref-component",{
template:`
<div>
<refs-component ref="name"></refs-component>
<button @click="focus">fouce</button>
</div>
`,
methods:{
focus:function(){
this.$refs.name.focus()
}
}
})
Vue.component("refs-component",{
template:`<input type="text" />`
})
new Vue({
el:"-sharpL4"
})
</script>error report is
how can I access the contents of this subcomponent?