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 をよろしくお願いいたします。