Vue.js 如何获取子组件中的任意元素

Question

如图，动态添加节点为一行文字和对应的input，input原本是隐藏的，点击文字之后显示input。之后我想让input获得焦点（focus），但不知该如何恰当的获取这个input（不使用DOM操作）。代码如下：（html文件）<script src="https://cdn.jsdelivr.net/npm/vue"></script><div id="app">        <test v-for="(item,index) in items" :item="item" @show="show"></test></div><script>Vue.component('test',{    props:['item'],    template:    `    <div>        <p @click="show($event,item)">{{item.text1}}</p>        <input v-model="item.text1" v-show="item.show_input" :ref="item.text1"></input>    </div>    `,    methods:{        show(event,item){            this.$emit('show',event,item);        }    }});new Vue({    el:'#app',    data:{        items:[            {                'text1':'aaaaaaa',                'show_input':false            },            {                'text1':'bbbbbbb',                'show_input':false            }        ]    },    methods:{        show(event,item){            item.show_input=true;            let ref_name=item.text1;            console.log(this.$refs.ref_name); // undefined        }    }});</script>