1. 機能説明今日は、この小さな機能を実装します。ページがレンダリングされた後、div 要素が表示されます。この div 要素をクリックすると、div 要素が消え、input 要素が表示され、input 要素がフォーカスされます。誰もが簡単だと思うと思いますので、見てみましょう〜 NextTick.vue という名前のコンポーネントを作成します。 ページ内での登録のご紹介 2. 親コンポーネント<テンプレート> <div> <次のティック></次のティック> </div> </テンプレート> <script lang="ts"> 「../components/NextTick.vue」からNextTickをインポートします。 エクスポートデフォルト{ 名前:"概要", コンポーネント:{ 次のティック }, } </スクリプト> 3. サブコンポーネント NextTick.vue<テンプレート> <div> <div>私はコンポーネントです</div> <div v-if="flag" class="sun" @click="handerClick">入力を表示</div> <input v-else ref="inputRef" class="yuelaing"/> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ(){ 戻る { フラグ:true、 } }, メソッド: { ハンドラークリック(){ this.flag=false; this.$refs.inputRef.focus(); }, }, } </スクリプト> 4なぜ未定義なのでしょうか?this.flag=false; this.$refs.inputRef.focus(); ページ操作を実行するときは、this.$refs.inputRef.focus(); 時間がかかります(まだ更新されていないため、まだ古いページです) 現時点では DOM 要素は取得されていません。 したがって、エラーが報告されます。 解決策1: ページに要素を取得させるだけです。setTimeoutを使用します。 タイムアウトを設定します(()=>{ this.$refs.inputRef.focus(); },100) この問題は次のように対処することが可能です。 しかし、それは非常に非専門的であるように思われます。 解決策2: // コンポーネントが最新のデータに従ってビューに再レンダリングされると、関数 this.$nextTick(()=>{ this.$refs.inputRef.focus(); }) 5. v-if を v-show に変更するとフォーカスを取得できますか?「v-if は動的に作成および破棄されるため、作成と破棄のプロセスには時間がかかります。」と言う人もいます。これが v-if が要素ノードを取得できない理由であり、v-show を使用することでこれを回避できます。 あなたの言ったことは意味があると思いますか? v-ifをv-showに置き換えてみましょう <テンプレート> <div> <div>私はコンポーネントです</div> <div v-show="flag" class="sun" @click="handerClick">入力を表示</div> <input v-show="!flag" ref="inputRef" class="yuelaing"/> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ(){ 戻る { フラグ:true、 } }, メソッド: { ハンドラークリック(){ this.flag=false; console.log( this.$refs.inputRef ); this.$refs.inputRef.focus(); }, }, } </スクリプト> 6. 実際の結果ページはエラーを報告しなかったものの、フォーカスが合っていなかったことが分かりました。v-showに変更しても、この問題は明らかに解決しませんでした。 この問題の原因は、子コンポーネントでthis.flag=falseの後に、次のコードがすぐに実行されることです。
しかし、実行すると、ビューはまだ更新されておらず、まだ古いページであり、この時点では DOM 要素を取得できないため、 undefined が表示されます。そのため、遅延を追加した後にフォーカスできます。 コンポーネントが最新のデータに基づいてビューに再レンダリングされると、内部の関数が実行されます。 これは$nextTickの基本的な使い方です this.$nextTick(()=>{ this.$refs.inputRef.focus(); }) 7. コンポーネントをページに変換することでフォーカスを取得できますか?他にも、子コンポーネントなので、子コンポーネントは親コンポーネントの後にレンダリングされるという意見もあります。したがって、要素ノードは取得されませんでした。 これも理由の一つです... 疑問を解消するために、前の友人が言ったことは正しくないような気がします。サブコンポーネントをページに変換して、 <テンプレート> <div> <div>私はコンポーネントです</div> <div v-show="flag" class="sun" @click="handerClick">入力を表示</div> <input v-show="!flag" ref="inputRef" class="yuelaing"/> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ(){ 戻る { フラグ:true、 } }, メソッド: { ハンドラークリック(){ this.flag=false; this.$refs.inputRef.focus(); }, }, } </スクリプト> それでもまだ動作しないことがわかりました。これは、データを更新した後、Vue がリアルタイムで更新されないことを完全に示しています。 データが更新されてからページに表示されるまでには時間差があり、その時間差内でページデータを呼び出しても取得できません。 言い換えると、VueはDOMを更新するときに非同期に実行されます。 8. $nextTickがあるのはなぜか$nextTickの理由は、Vueのデータが変更された後、ビューのDOMがすぐに更新されず、DOMの更新に時間がかかるためです。 ちょっとした実験を通してこれを見てみましょう <テンプレート> <div> <div ref="ユニーク"> <h1>{{ 続き }}</h1> </div> <div class="sun" @click="handerClick">値を変更</div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ(){ 戻る { 続き:「私はデフォルト値です」 } }, メソッド: { ハンドラークリック(){ this.cont = 'デフォルト値を変更しました'; console.log('1==>',this.$refs.unique.innerText); this.$nextTick(()=>{ console.log('2==>',this.$refs.unique.innerText); }) }, }, } </スクリプト> 最初の値と 2 番目の値が異なることがわかりました。これは、ビュー上の DOM の更新がその間に必要だったためです。この差の範囲内で要素の値を取得しますが、それはまだ古い値です。つまり、最初の値は初期値で、2 番目の値は変更された値です。 データを更新したいので、DOMの値をすぐに取得できます。 そこでvueはこの問題を解決するために$nextTickを提供しています 9. Vue.nextTick と this.$nextTick の違いVue.nextTickはグローバルメソッドです this.$nextTick( [callback] ) はインスタンスメソッドです。 ページには複数のインスタンスが存在する可能性があることは誰もが知っています。つまり、this.$nextTick は特定のインスタンスに対して正確である可能性があります。実際のところ、この 2 つは本質的に同じです。 10. nextTickを使うためのちょっとしたコツライフサイクルマウントがレンダリングされるときに、すべてのサブコンポーネントがレンダリングされることが 100% 保証されるわけではないことは誰もが知っているので、mounted で this.$nextTick を使用して、すべてのサブコンポーネントがレンダリングされることを確認できます。 マウントされたフックは、サーバー側のレンダリング中には呼び出されません。 マウント: 関数 () { this.$nextTick(関数() { //データが変更されると、 // ビューを再レンダリングした後、内部のメソッドを実行します // この文は次の文と同等です: // 次の DOM 更新サイクルまでコールバックを遅延します // 同等: データの変更後、DOM が更新されるまで待ってから実行します }) } 要約するこれで$nextTickに関する記事は終了です。$nextTickに関する詳細については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル
>>: Mysqlの自動増分IDについて知らないことがあるかもしれません
<br />ポテトチップスパーティーのこのエピソードに参加して、何人かの友達に会えてとて...
システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...
1. MySQLを削除する a. sudo apt-get autoremove --purge m...
環境: CentOS 7公式ドキュメント: http://supervisord.org/インストー...
開発プロセス中に、MySQL データベースを復元した後にデータベース データに文字化けが発生した場合...
Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...
この記事では、Vueを使用して特定の領域に透かしを描く方法を紹介します。具体的な内容は次のとおりです...
目次1. 補足知識ポイント: 関数の暗黙的な変換2. 補足知識: call/apply を使って配列...
目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...
序文: Docker はオープンソースのアプリケーション コンテナ エンジンであり、開発者はこれを使...
Vue - シャトルボックス機能を実装します。効果図は次のようになります。 CS 。移行{ ディスプ...
MySQL8.0.22のインストールと設定(超詳細)参考までに、具体的な内容は次のとおりです。みなさ...
まず、MySQL公式サイトからインストールパッケージをダウンロードします。MySQLはオープンソース...
序文CSS で水平方向と垂直方向に中央揃えする方法はたくさんあります。この記事で紹介する方法は非常に...
序文デフォルトでは、Nginx ログはファイルに書き込まれます。各ドメインのログを区別するために、通...