Custom Directives

주로 Low-Level DOM(Html)접근과 관련된 로직 재사용에 사용됨

<aside> 🧑‍💻

사용자 디렉티브를 정의하는 방법은 <script setup>에서 v로 시작하는 CamelCase 변수를 선언하여 지정합니다.

</aside>

<script setup>
const vFocus = {
  mounted: (el) => {
	  el.focus()},
}

<aside> 🧑‍💻

객체로 정의 → mounted훅을 사용하여 파라메터로 element를 받을 수 있다. → element 포커스

</aside>

• 적용하기

Tip. 커스텀 디렉티브 vFocus는 Html에서 제공하는 autofocus와는 조금 다르다

autofocus속성은 동적으로 컴포넌트를 추가하면 동작하지 않음! 정확하게는 페이지가 로딩될 때 한 번만 실행됩니다.

directives 옵션

커스텀 디렉티브를 <script>에서 선언할 때 사용한다 *script setup아님!

<script> 
export default {
	setup() {
	
	},
	directives: {
		focus: {
		...
		}
	}
} 
</scipt>

Global Directives