nuxt-link와 클릭 이벤트(click event)를 같이 사용하는 방법

남양주개발자

·

2020. 8. 23. 17:22

728x90
반응형

nuxt-link와 click 이벤트를 같이 사용해야 될 경우가 있습니다. nuxt-link에 @click.native를 활용하면 간단하게 해결할 수 있습니다. nuxt-link는 vue-router의 router-link를 활용하고 있으니 router-link에서도 동일하게 동작할거라 기대할 수 있습니다.

<nuxt-link to="/about" @click.native="clickhandler">이동</nuxt-link>

하지만 만약 nuxt-link를 컴포넌트로 빼서 이벤트 Emit을 활용해서 클릭이벤트를 사용하려고 하면 정상적으로 동작하지 않습니다.

<template>
  <nuxt-link :to="url" @click.native="onClick">
    <slot></slot>
  </nuxt-link>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      required: true
    },
  },
  methods: {
    onClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style>

</style>
<template>
  <div class="container">
    <Link url="/about" @onClick="clickhandler">이동</Link>
  </div>
</template>

<script>
import Link from '@/components/Link'
export default {
  components: {
    Link
  },
  methods: {
    clickhandler() {
      console.log('Link에서 전달 받았습니다') // not working
    }
  }
}
</script>

해결방법

해결방법은 조금 편법이긴 하지만 이벤트 핸들링 방식으로 이벤트 핸들러를 연결하는 것이 아닌 props에 이벤트를 전달해서 직접 연결하는 방식으로 처리합니다.

<template>
  <nuxt-link :to="url" @click.native="onClick">
    <slot></slot>
  </nuxt-link>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      required: true
    },
    // 이벤트 핸들러를 props로 전달
    onClick: {
      type: Function,
      default: () => {}
    }
  }
}
</script>

<style>

</style>
<template>
  <div class="container">
    <Link url="/about" @onClick="clickhandler">이동</Link>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'
import Link from '@/components/Link'
export default {
  components: {
    Link
  },
  methods: {
    clickhandler() {
      console.log('Link에서 전달 받았습니다') // working!
    }
  }
}
</script>

마무리

이벤트 발생(Event Emit)은 컴포넌트의 통신 방법 중 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방식입니다. 해당 방식으로 하위컴포넌트에서 상위 컴포넌트로 이벤트를 전달하는데 nuxt-link에서 이를 활용하려고 하니 애매한 타이밍 문제(?) 때문에 이벤트 발생을 하기 전에 페이지 전환을 시키고 끝나는 현상이 발생했습니다. 직접 이벤트 핸들러를 연결하면 이런 문제가 생기지 않으니 조금 아이러니하죠. 어쨋든 조금 편법으로 처리할 수 있는 방법도 있으니 참고하시면 될 것 같습니다 :)

728x90
반응형
그리드형

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다