Vue 하위 컴포넌트에서 부모 컴포넌트 Event prevent : .stop modifier

<ul class="todo-list">
      <li
        class="todo-list__items"
        v-for="(todo, index) in todos"
        :key="index"
        @click="checkDone(index)"
      >
        <ul class="item-box">
          <li class="detail" :class="{ done: todo.done }">{{ todo.title }}</li>
          <li class="btns">
            <font-awesome-icon icon="edit" class="edit" @click.stop="handleEdit()" />
            <font-awesome-icon
              icon="trash"
              class="delete"
              @click.stop="handleDelete()"
            />
          </li>
        </ul>
      </li>
    </ul>

todo-list 컨테이너 역할을 하는 <ul> 태그가 있고, 아래에 todo-list item들이 v-for 를 도는 형태이다. 하나의 todo 아이템은 todo 타이틀 역할을 하는 <li> 태그와 버튼부 역할을 하는 <li> 태그 둘로 또 나뉘는데, 이때 상위 컴포넌트인 for 문의 <li>에 checkDone()이라는 함수가 걸려 있다.

 

해당 함수는 클릭 시 상태값을 토글해주어 하위 태그의 클래스를 붙이고 떼어주는 역할을 도와주게 된다. 하지만 버튼 부는 다른 이벤트를 독립적으로 수행해야 하므로, 상위 컴포넌트의 event를 prevent 해주어야 한다.

 

이때에는 상위 컴포넌트의 이벤트를 fire하지 말아야 할, 독립적으로 실행되어야 하는 함수에 .stop modifier를 붙여 간단하게 손볼 수 있다.

 

버튼 부를 제외한 <li> 태그 범위를 누르면 line-through 클래스 스타일이 생기고, 해당 data 값도 토글되어 바뀐다.

 

버튼 조작 시 부모 컴포넌트의 스타일과 데이터에는 영향이 없다.