Vue でイベント修飾子 .stop を使用してイベントのバブリングを停止する方法

イベント バブリングとは、要素がイベントをトリガーすると、イベントが要素から要素のルート ノードまでバブルアップし、渡されるすべての親要素のイベント処理関数をトリガーすることを意味します。場合によっては、イベントのトリガーを制御し、親要素のイベントではなく、現在の要素のイベントのみを処理する必要があることがあります。 Vue には、イベントのバブリングを停止するためのイベント修飾子「.stop」が用意されています。この記事では、Vue でイベント修飾子「.stop」を使用してイベントのバブリングを停止する方法を詳しく紹介します。

Vue では、イベント修飾子は「.」で終わる命令であり、イベントのデフォルトの動作を制御したり、特別なイベント処理を実装したりするために使用できます。イベント修飾子の構造は次のとおりです。

@event.modifier="method"

ここで、「event」はイベント名、「modifier」はイベント修飾子、「method」です。 「」はコールバック関数の名前です。イベント修飾子「.stop」を使用する場合は、イベント名の末尾に追加できます。

@event.stop="method"

このようにして、要素がトリガーされるときに、イベントの場合、イベントは親要素ノードにバブルせず、現在の要素ノードで停止します。

次は具体的な例です。ネストされたリストを含む Vue コンポーネントがあるとします。各リスト項目はクリック可能なボタンです。ユーザーがボタンをクリックすると、モジュールがポップアップする必要があります。表示するステータス ボックスアイテムの詳細情報。現時点では、クリック イベントのバブリングを防ぐためにイベント修飾子「.stop」を使用する必要があります。

template:`

<li v-for="item in items" :key="item.id">
  <button @click.stop="showModal(item)">Show Details</button>
  <div v-if="item.id===selectedItemId">{{item.details}}</div>
  <ul v-if="item.children.length>0">
    <child-list :items="item.children"></child-list>
  </ul>
</li>

`,
methods:{
showModal(item){

this.selectedItemId=item.id;
// show modal

}
}

上記のコードでは、ユーザーがボタンをクリックすると、 showModal メソッドがトリガーされ、項目の ID がメソッドに渡されます。同時に、イベントのバブリングを防ぐためにイベント修飾子「.stop」が追加され、現在のボタンのクリック イベントのみがトリガーされ、その親要素にバブリングしないことが保証されます。

一般に、Vue でイベント修飾子「.stop」を使用してイベントのバブリングを停止するのは非常に簡単で、イベント名の後に「.stop」を追加するだけです。 Vue のイベント修飾子メカニズムをマスターすることで、さまざまなイベントの動作をより正確に制御し、アプリケーションに優れたユーザー エクスペリエンスをもたらすことができます。

以上がVue でイベント修飾子 .stop を使用してイベントのバブリングを停止する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。