Vue에서 이벤트 수정자 .stop을 사용하여 이벤트 버블링을 중지하는 방법

이벤트 버블링은 요소가 이벤트를 트리거할 때 이벤트가 요소에서 요소의 루트 노드로 버블링되어 전달되는 모든 상위 요소의 이벤트 처리 기능을 트리거한다는 것을 의미합니다. 때로는 이벤트 트리거를 제어하고 상위 요소의 이벤트가 아닌 현재 요소의 이벤트만 처리해야 하는 경우도 있습니다. Vue에서는 이벤트 버블링을 중지하기 위해 이벤트 수정자 ".stop"을 제공합니다. 이 기사에서는 Vue에서 이벤트 버블링을 중지하기 위해 이벤트 수정자 ".stop"을 사용하는 방법을 자세히 소개합니다.

Vue에서 이벤트 수정자는 "."으로 끝나는 명령으로, 이벤트의 기본 동작을 제어하거나 특수 이벤트 처리를 구현하는 데 사용할 수 있습니다. 이벤트 수정자의 구조는 다음과 같습니다.

@event.modifier="method"

여기서 "event"는 이벤트 이름이고, "modifier"는 이벤트 수정자이며, "method"는 콜백 함수의 이름입니다. . 이벤트 수정자 ".stop"을 사용할 때 이벤트 이름 뒤에 추가할 수 있습니다:

@event.stop="method"

이렇게 하면 요소가 이벤트를 트리거할 때 이벤트가 부모에게 버블 위험을 주지 않습니다. 요소 노드이지만 현재 요소 노드에서 중지됩니다.

다음은 중첩된 목록을 포함하는 Vue 구성 요소가 있다고 가정합니다. 각 목록 항목은 사용자가 버튼을 클릭하면 이 항목에 대한 세부 정보가 표시되어야 합니다. 이때 클릭 이벤트가 버블링되는 것을 방지하기 위해 이벤트 수정자 ".stop"을 사용해야 합니다:

template:`
ff6d136ddc5fdfeffaf53ff6ee95f185

<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>

929d1f5ca49e04fdcb27f9465b944689
`,
methods:{
showModal( item ){

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

}
}

위 코드에서 사용자가 버튼을 클릭하면 showModal 메소드가 트리거되고 해당 항목의 ID가 메소드에 전달됩니다. 동시에 이벤트 수정자 ".stop"이 추가되어 이벤트 버블링을 방지하여 현재 버튼의 클릭 이벤트만 트리거되고 상위 요소에 버블링되지 않도록 합니다.

일반적으로 Vue에서 이벤트 수정자 ".stop"을 사용하여 이벤트 버블링을 중지하는 것은 매우 간단합니다. 이벤트 이름 뒤에 ".stop"만 추가하면 됩니다. Vue의 이벤트 수정자 메커니즘을 마스터함으로써 다양한 이벤트의 동작을 보다 정확하게 제어하고 애플리케이션에 더 나은 사용자 경험을 제공할 수 있습니다.

위 내용은 Vue에서 이벤트 수정자 .stop을 사용하여 이벤트 버블링을 중지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!