Vueカスタムコンポーネントはイベント修飾子を使用してピットレコードを踏む

Vueカスタムコンポーネントはイベント修飾子を使用してピットレコードを踏む

序文

今日、自作のコンポーネントを使っていたところ、突然、長い間忘れていたバブリングイベントに遭遇しました。そこで、Vue 独自のイベント修飾子 (.stop) を使うことを考えました。これでバブリング問題は解決できると思ったのですが、この問題に遭遇しました。

ここに画像の説明を挿入

頭の中に疑問符がたくさん浮かんでいますか? ? ? ?これは一体何だ?Vueのドキュメントに従って書いたんだ(血を吐く)

そこで、私は問題解決の旅を始めました。

プログラマーのルーチン操作:

ブラウザを開いて、Baidu/Google で検索します。いろいろ出てきますが、どれも私の問題を解決できません。Vue のドキュメントを参照するしかありません! ! ! !
私はVueのドキュメントを少なくとも何十回も読んでいて、何も見逃していないと思っていました。Vueのドキュメントにはこの問題の答えがないと確信していました。一生懸命検索してここにたどり着きました

ここに画像の説明を挿入

えっと?このevent.stopPropagation()? ? ?

突然、あるアイデアが浮かびました! ! ! !

ここに画像の説明を挿入

event.stopPropagation() をトリガーできるため、イベントを渡すことができ、問題を解決できます。やるだけ! !

アマチュアコード修正を始める

ここに画像の説明を挿入

カスタム コンポーネントを次のように使用します。

ここに画像の説明を挿入

コンソール出力を見てみましょう

ここに画像の説明を挿入

それでおしまい! ! ! ! !しかし、なぜ2回出力されるのでしょうか? ? ? ?すぐに解けるだろうと思ったのですが、奇妙な好奇心が湧いてきました。

2度発生したバグを見つける旅を始めましょう

.once 修飾子を追加してみましたが、機能しませんでした。さらに数回クリックしたところ、2 回トリガーされていることがわかりました。

ここに画像の説明を挿入

とても奇妙ですね!これは一体何だ! ! ! !

Vueイベント修飾子.onceの使用を続行すると、次の出力が表示されました。

ここに画像の説明を挿入

確かに一度しかトリガーできませんが、なぜ最初は 2 回印刷されるのでしょうか? ! ! (かすかな)

問題は完全に解決されていません。引き続き調査してください。 。 。 。

印刷タイムスタンプ(timeStamp)を確認してください。それらはすべて同時にトリガーされますが、これは簡単ではありません。

ブラウザを使用して検索を続ける

ひらめきがありました。setTimeout を使用して、強制的に 1 回だけトリガーするのはどうでしょうか?

コード変換を開始する

ここに画像の説明を挿入

さて、効果を見てみましょう

ここに画像の説明を挿入

成功! ! ! !途中で起こったすべての困難は解決されました! ! !

要約する

これで、イベント修飾子を使用した Vue カスタム コンポーネントに関するこの記事は終了です。イベント修飾子を使用した Vue に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue5 のイベント修飾子 (スタイル) とテンプレート
  • Vueのイベント処理とイベント修飾子の詳細な説明
  • Vue ダブルクリックイベント 2.0 イベント監視 (クリック-ダブルクリック-マウスイベント) とイベント修飾子の操作
  • Vue イベント修飾子のネイティブとセルフの例の詳細な説明
  • Vue フレームワークのキーボード イベント、キー値修飾子、双方向データ バインディング
  • Vue.js イベント修飾子の使用に関するチュートリアル
  • Vue のイベント修飾子: once、prevent、stop、capture、self、passive

<<:  MySQL データベースを手動および自動でバックアップする 8 つの方法

>>:  Dockerでイメージをプルするための手順を完了する

推薦する

Docker+Jenkinsを使用して自動的にビルドおよびデプロイする

この記事では、Docker+Jenkins の自動ビルドデプロイメントを紹介し、皆さんと共有します。...

純粋な CSS でカスタムラジオボタンとチェックボックス機能を実装する

1. 効果を達成する 2 知識ポイント2.1 <label> タグHTML では、<...

Webstorm と Chrome を使用して Vue プロジェクトをデバッグする方法

目次序文1. 新しいVueプロジェクトを作成する2. WebStormの設定1. デバッガポートを設...

HTML doctype の役割の紹介

ドキュメント モードには次の 2 つの機能があります。 1. HTML文書を解析するためにどのHTM...

アカウントとパスワードを記憶する機能を実現するVueの考え方とプロセス

目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...

HTMLフォーム送信方法のケーススタディ

フォームの送信方法をまとめると次のようになります。 1. 送信ボタンを使用して送信します。送信ボタン...

JavaScript クリップボードの使用法の詳細な説明

(1)はじめに: clipboard.js は、テキストをクリップボードにコピーする機能を実装する軽...

Linuxはバイナリモードを使用してmysqlをインストールします

この記事では、LinuxにバイナリモードでMySQLをインストールする具体的な手順を参考までに紹介し...

three.js で 3D ダイナミック テキスト効果を実現する方法

序文みなさんこんにちは。CSS ウィザードの alphardex です。以前、海外のウェブサイトを閲...

ウェブページ作成時に標準 HTML コードを使用する際のポイント

多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...

虫眼鏡効果を実現するJavaScript

この記事では、虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...

Nodejs 探索: シングルスレッドの高並行性の原理を深く理解する

目次序文一目でわかる建築オペレーティングシステムとの対話シングルスレッドイベント駆動/イベントループ...

Docker ベースの MySQL マスタースレーブレプリケーション環境を構築するための実装手順

1. はじめに以前のプログラム アーキテクチャは次の形式になります。プログラムのサイズが大きくなると...

CentOS 8が利用可能になりました

CentOS 8 が利用可能になりました! CentOS 8 と RedHat Enterprise...

MySQL 5.7.18 無料インストールバージョンの設定チュートリアル

MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...