javascript - 显示组件时，组件中的文本框自动获取焦点-PHP中文网问答

我封装了一个表单组件，其中有一个文本框。
父组件通过 $broadcast('form-show') 事件，控制表单组件的显示隐藏。
表单组件中有一个，请问大家，如何在表单组件显示时，这个文本框自动获取焦点呢？</p> <p>我已经试过以下两种方法：<br>1、给 <textarea> 添加 autofocus 属性，可是只有表单组件第一次显示时，才能自动获取焦点，隐藏之后再显示就不行了。<br>2、在表单组件中使用</p> <pre class='brush:php;toolbar:false;'><code>events: { 'form-show': function() { this.show = true; this.$els.textInput.focus(); // this.$els.textInput指向<textarea> ，此方法不行 } } 下面这种： events: { 'form-show': function() { this.show = true; this.$nextTick(function(){ // 还是不行 this.$els.textInput.focus(); }); } }</code></pre> <p>哪位朋友知道该怎么解决这个问题吗？谢谢了。</p> </div> <div class="share flexRow"> <div class="shareReply flexColumn shareDiv"> <a href="javascript:;"><img class="sharerImg" src="/static/images/images/icon50.png" data-id="1"></a> <span class="sharerSpan">1</span> </div> <div class="shareLike flexColumn shareDiv" onclick="ask_comment_good(49325)"> <a href="javascript:;" > <img class="sharerImg" src="/static/images/images/icon52.png" data-id="2"> </a> <span class="sharerSpan">0</span> </div> <div class="shareLDz flexColumn shareDiv dzdiv dzdiv1 aiaskgoodICollection" data-id=""> <a href="javascript:;" > <img class="sharerImg " src="/static/images/images/icon37.png" data-id="5"> </a> <span class="sharerSpan">0</span> </div> </div> <script> $('.jbtitleimg').on('click',function(){ $("#layuitc").hide() var layer = layui.layer; layer.closeAll(); }) $('.jbbtn').on('click',function(){ $("#layuitc").hide() var layer = layui.layer; layer.closeAll(); }) $('.sharerImg').mouseenter(function(e){ var dataId = e.currentTarget.dataset.id if(dataId == 1){ // $('.shareReply').find('img').attr('src','/static/images/images/icon51.png') }else if(dataId == 2){ // $('.shareLike').find('img').attr('src','/static/images/images/icon53.png') }else if(dataId == 4){ $('.shareShare').find('img').attr('src','/static/images/images/icon55.png') }else{ } }) $('.sharerImg').mouseleave(function(e){ var dataId = e.currentTarget.dataset.id if(dataId == 1){ // $('.shareReply').find('img').attr('src','/static/images/images/icon50.png') }else if(dataId == 2){ // $('.shareLike').find('img').attr('src','/static/images/images/icon52.png') }else if(dataId == 4){ $('.shareShare').find('img').attr('src','/static/images/images/icon54.png') } }) </script>             <div id="commentinput" class="info detail-comment-input layui-hide-sm"> <div class="detail-ci-avator"> <img src="https://img.php.cn/upload/avatar/000/000/009/582a8a4e51c78729.jpg" alt="阿神"/> <div class="detail-r"> <span class="detail-name">阿神</span> <p class="detail-signal">闭关修行中......</p> </div> </div> <div id="js-reply-wrap"> <div id="js-reply-editor-box" class="wd-comment-box js-ci-inner edui-imooc"></div> <div class="qa-ci-footer"> <div class="qa-ci-footright"> <button id="js-wenda-ci-submit" class="detail-btn" data-qid="49325">回答</button> </div> </div> </div> </div> <div id="pinglundeplace" class="allReply ask-reply-all-list comments-content"> <div class="arTop flexRow"> <div class="artLeft flexRow fontBold fontColor1">全部回复<b class="artlb colorGrey">(1)</b></div> <button class="artBtn ask-comment-answer">我来回复</button> </div> <div class="allReplayLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="https://img.php.cn/upload/avatar/000/000/164/59190898474f6485.png" alt="PHPz" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/164.html" target="_blank" class="wdcdcName">PHPz<b class="wdxqRcT colorGrey">2017-04-11 11:50:01</b></a> <span class="wdxqrcTopspan colorGrey">1楼</span> </div> <div class="wdcdcCons"><p>嗯？如果我沒看錯的話，結構是</p> <p>父組件<br>----表單組件<br>--------文本框</p> <p>如果真是這樣的話，你寫得沒錯阿，懷疑是其他因素造成，例如你的 <code>textInput</code> 確定有拿到東西嗎？<br><code>v-el:textInput</code> 這樣是<code>錯</code>的<br><code>v-el:text-input</code> 這樣才是<code>對</code>的</p> <p>這邊是按照你代碼模擬的情況</p></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(96320)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/009/582a8a4e51c78729.jpg" class="retlAvatar" > <span class="retlName">阿神</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复">