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();

     }

  }    

})

这样试试