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',{&nbsp; template:`<input ref='input' type="text" />`,&nbsp; methods: {&nbsp; &nbsp; &nbsp;focus(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.$refs.input.focus();&nbsp; &nbsp; &nbsp;}&nbsp; }&nbsp; &nbsp;&nbsp;})这样试试