vue自定义组件ref报错

Question

在使用自定义组件使用ref的时候，发现会报错，
当正确的时候：点击按钮输入框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:'#L4'
            })

但是将输入框写入一个子组件的时候再执行按钮事件，就会报错

     <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:'#L4'
            })
           </script>

报错是

请问如何才能访问这个子组件的内容呢？

Answer 1

显然是refs-component这个组件没有focus方法，你没有引用在input上

Vue.component('refs-component',{
  template:`<input ref='input' type="text" />`,
  methods: {
     focus(){
         this.$refs.input.focus();
     }
  }    
})

这样试试