[vue3] 커스텀 디렉티브 태그

vue에서는 엘리먼트 각각의 생명주기를 감지해, 이벤트를 등록할 수 있음

onMounted, beforeCreated 등을 이용해 컴포넌트 전체의 생명주기가 아닌

엘리먼트 각각의 생명주기를 감지함

 

 

<script setup> 기준으로 설명함.

v로시작하는 카멜케이스 변수들을 커스텀 디렉티브 태그로 사용할 수 있음

<script setup>
// 템플릿에서 v-focus로 활성화 가능
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

vFocus를 태그로 지정했으며,

이 태그를 등록한 엘리먼트는 mounted 될시에 focus하라는 뜻임

아주 간단함

 

위 예시는 컴퍼넌트 하나에서만 사용이 가능한 것이고,

아래예시처럼 createApp을 이용해 앱전체에서 사용할 수 있다.

const app = createApp({})

// 모든 컴포넌트에서 v-focus를 사용할 수 있도록 합니다.
app.directive('focus', {
  mounted: (el) => el.focus()
})

 

 

출처 : https://v3-docs.vuejs-korea.org/guide/reusability/custom-directives.html#introduction

커스텀 디렉티브 | Vue.js