자식 버튼 컴포넌트에서 click 이벤트를 듣고 싶을 때

밑에 ButtonContent를 클릭했을 때 click 이벤트를 듣고 각 버튼에 맞는 메서드를 처리하고 싶었다. 그런데 아무 일도 일어나지 않았다.

<template>
	<div class="button-wrapper">
    <ButtonContent :value="'발행'" @click="publishContent" />
    <ButtonContent :value="'임시저장'" @click="saveContent" />
    <ButtonContent :value="'취소'" @click="cancelContent" />
  </div>
</template>

자식 버튼 컴포넌트에서 @click 이벤트를 발생시키면 당연히 이벤트가 발생하는 줄 알았다. 하지만 내가 예상했던 대로 동작하지 않았던 이유는, 자식 컴포넌트에게 이벤트를 v-on으로 바인딩시키는 상황은 오로지 자식 컴포넌트에서 emit한 이벤트를 listen할 때만 해당하기 때문이다.

이런 상황에서는

• 자식 컴포넌트에서 부모가 클릭하였을 때 발생하는 click 이벤트를 듣고,
• 이벤트 핸들링 시에 부모에게 ‘click’ 이벤트를 emit

하는 방식으로 해결할 수 있다(이 두 click은 서로 다른 click이다!).

// 자식 컴포넌트
<template>
  <div
    **@click="$emit('click')"**
  >
    {{ value }}
  </div>
</template>

깃 다른 브랜치에서 unstage된 내용을 원하는 브랜치로 옮기기

만약 내가 잘못된 브랜치에서 작업을 하고 있다는 것을 알았을 때 당황할 수 있다.

이 때 git stash를 사용해서 해당 브랜치에서 unstage된 내용을 내가 원하는 브랜치로 옮길 수 있다.

git stash
git checkout 내가원하는브랜치
git stash pop

이렇게 적용하면 된다.

뷰 라우터로 외부 링크에 접근할 수 있을까?

this.$router.push 방식을 외부 url에 접근하는 데에 사용할 수 있을까?

안 된다. 뷰 내부의 라우트에서만 사용할 수 있는 방식이다. 이 때 사용할 수 있는 방법은 아래 참고

How to redirect to external URL in Vue