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について知らないことがあるかもしれません
1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...
この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...
1. HTMLコードコードをコピーコードは次のとおりです。経験値: <span class=...
質問Alibaba Cloud イメージを使用して Docker をインストールすると、次の図に示す...
目次forループwhileループdo-while ループループのネストトラバーサルメソッド~のために...
序文馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います...
この記事は主に、MySQLを再インストールする際のクリーンでないアンインストールのさまざまな問題をま...
序文この記事では主に、curl を介してフォーム送信ログインを実装する方法について説明します。単一の...
Nginx は、マスター プロセス (MasterProcess) と、同じ数のホスト CPU コア...
Deepin 2014 のダウンロードとインストールDeepin 2014 のダウンロードとインスト...
今日ふと、HTML でチェックボックスのスタイルを変更できる範囲が限られていることと、チェックボック...
画像をダウンロード docker プル mysql:5.7 docker pull php:7.2-...
目次1. はじめに2. オンデマンド属性モード3. 乱雑な遅延読み込み属性パターン4. クラスの唯一...
navicatを使用してテストと学習を行います。まず、 set autocommit = 0;を使用...
MySQL トランザクション サポートは、MySQL サーバー自体にバインドされているのではなく、ス...