[Vue.js] Vue.js 이벤트 수식자 .stop과 .prevent

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.

 

 

Vue.js의 이벤트 수식자

---

이벤트 수식자로 아래의 여섯 종류가 있다.

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

 이 중에서도 사용빈도가 높은 .stop과 .prevent와 사용 방법에 대해서 간단하게 소개하려고 한다.

 

 

사용법

---

.stop

.stop은 JavaScript의 stopPropagation을 호출한다. 용어 그대로 현재 이벤트의 추가 전파(propagation)을 중지한다는 의미이다.

 Vue.js의 공식 문서에는 부모 요소로의 전달을 멈춘다고 기재되어 있다. 즉, Vue.js의 이벤트 수식자 .stop은 자식 요소의 이벤트가 부모의 이벤트를 호출하지 않도록 설정한다는 것이다.

<!-- 클릭 이벤트의 전달이 멈춘다. -->
<a v-on:click.stop="doThis"></a>

.stop 코드 샘플

 샘플로 여자친구집의 초인종 모델을 만들었다. 여자친구가 가족과 함께 사는 상태에서 여자친구 집을 방문할 때, 가능하면 그녀의 아버지를 만나고 싶지 않을 것이다.  이때, 이벤트 수식자 .stop이 유효하다.

<div id="app">
  <div class="ring_wrapper">
    <p>아버지의 차단이 존재</p>
    <div class="father" @click="fatherClick">
      <button class="child"　@click="childClick">
        초인종
      </button>
    </div>
  </div>
  <div class="fatherBlock ring_wrapper">
    <p>아버지의 차단이 존재하지 않음</p>
    <div class="father" @click="fatherClick">
      <button class="child" @click.stop="childClick">
        초인종
      </button>
    </div>
  </div>
</div>
<script>
const app = new Vue({
  el: '#app',
  data: {
    text: ''
  },
  methods: {
    childClick() {
      alert('여자친구「XX！어서와！」')
    },
    fatherClick() {
      alert('여자친구의 아버지「우리애한테 무슨 용건이？」')
    }
  }
})
</script>

 보통 초인종을 누르면(stop 수식자 없음), 여자친구의 멘트 뒤에 아버지의 멘트가 등장한다. 여자친구에게 아버지가 나오지 않도록 전달해두면(.stop 수식자 있음),  여자친구의 아버지를 만나는 것을 피할 수 있다.

 

.prevent

 .prevent는 JavaScript의 Event.preventDefault 메소드를 호출한다. Event 인터페이스의 preventDefault() 메소드는 이벤트가 명시적으로 처리되지 않은 경우에 user agent에 그 기본 액션을 정상적으로 수행해서는 안 된다고 전달하는 역할을 한다.

.prevent 코드 샘플

 어떨 때 사용할지에 대해 샘플을 살펴보자.

<div id="app">
  <div class="form_wrapper">
    <form v-on:submit="sendDeleteNumber">
      <input class="form-text" type="text"　v-model="textNonPrevent">
      <br>
      <input class="form-button" type="submit" value="submit으로 송신">
    </form>
  </div>
  <div class="form_wrapper">
    <form v-on:submit.prevent="sendKeepNumber">
      <input class="form-text" type="text" v-model="textPrevent">
      <br>
      <input class="form-button" type="submit" value="submit.prevent으로 송신">
    </form>
  </div>
</div>
<script>
const app = new Vue({
  el: "#app",
  data: {
    textPrevent: '',
    textNonPrevent: ''
  },
  methods: {
    sendKeepNumber() {
      alert(`「${this.textPrevent}」를 어딘가로 송신！form는 그대로 남는다！`)
    },
    sendDeleteNumber() {
      alert(`「${this.textNonPrevent}」를 어딘가로 송신！후에 화면이 갱신된다`)
    }
  }
})
</script>

 폼에 텍스트를 입력하여 submit을 송신하면 알람이 발동한다. 위쪽의 폼에 송신한 후 알람을 닫으면 화면이 갱신되어 폼에 작성한 문자열이 사라진다. 이것은 원래 submit의 action속성으로 화면 이동이 기본으로 되어 있기 때문이다.

 아래의 폼에서 송신하여 알람을 닫아도, 폼에 입력한 문자열이 그대로 남아 있는 것을 알 수 있다. 차이점은 폼의 submit에 .prevent를 지정해뒀기에 기본적인 action이 동작하지 않게 된다.

 의도 없이 화면 이동, 화면 갱신을 피하고 싶은데 .prevent가 효과적일 것이다. 

---

참고자료

https://techblog.roxx.co.jp/entry/2019/02/08/122914