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でイメージをプルするための手順を完了する

推薦する

HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 1)

中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りた...

MySQLのジョイントインデックス機能の分析と使用例

この記事では、例を使用して、MySQL 共同インデックスの機能と使用方法を説明します。ご参考までに、...

MySQL スロークエリ pt-query-digest スロークエリログの分析

1. はじめにpt-query-digest は、MySQL のスロー クエリを分析するためのツール...

ページ内のリストプルダウン効果を実現するための純粋なCSS

次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...

Linux で 1 つのファイルの内容を別のファイルの末尾にコピーする

問題の説明:たとえば、ファイル 11 の内容は次のとおりです。こんにちはファイル22の内容は次のとお...

Vue イベントの $event パラメータ = イベント値の場合

テンプレート <el-table :data="データリスト"> &...

SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...

MySQLの連結関数CONCATの使い方の詳しい説明

前回の記事では、MySQL の置換関数 (Replace) とセグメンテーション関数 (SubStr...

CSS3 のメディアクエリと rem レイアウトを組み合わせてモバイル画面に適応

CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...

CentOS 6-7 PHPのyumインストール方法(推奨)

1. 現在インストールされているPHPパッケージを確認するyum list installed |...

Raspberry PiにDockerをインストールする方法

Raspberry Pi は ARM アーキテクチャをベースとしているため、Docker のインスト...

Vueは、選択した月に応じて日付に対応する曜日を動的に表示します。

私たち謙虚なプログラマーは、今でもこう歌わなければなりません。「あなたも私も、この世に生まれて、一日...

CSS3 における擬似クラスの一般的な使用法の詳細な説明

before/after 疑似クラスは、要素内に 2 つの追加タグを挿入するのと同じです。最も適した...

OneProxy に基づいて MySQL の読み取り/書き込み分離と負荷分散を実装する

導入パート1: 冒頭に書いたOneProxy は、民間ソフトウェアによって完全に独立して開発された分...