[Vue] useAttrs( ) : 하위 컴포넌트로의 속성 전달 (Composition API)

리액트에서 하위 컴포넌트에 속성 바인딩시

아래와 같은 문법을 사용하다 보니 문득 궁금해졌다...

// 부모 컴포넌트
<ChildComponent {...props} />

// 또는 특정 props만 전달
<ChildComponent {...{ prop1, prop2 }} />

 

 

 

아.. vue 에서 같은 기능이 머더라... 기억이 나지 않는다;

그래서 리마인딩 포스팅을 한다..

 

 `useAttrs()` 또는 `setup` 컨텍스트를 통해 attrs에 접근할 수 있습니다.

부모 컴포넌트에서 자식 컴포넌트로 여러 속성을 쉽게 전달할 때 유용합니다.

 

• `useAttrs()`를 사용하여 attrs에 접근
• `v-bind="attrs"`로 모든 속성을 한 번에 바인딩
• props로 선언된 속성은 attrs에 포함되지 않음
•  v-on 이벤트 리스너도 attrs에 포함됨
• 컴포넌트 재사용성 향상에 매우 유용
• inheritAttrs 옵션으로 속성 상속 제어 가능

 

<!-- BaseInput.vue -->

<template>
<input v-bind="attrs" />
</template>

<script setup>
  import { useAttrs } from 'vue'
  
  const attrs = useAttrs()
</script>

 

 

관련 포스팅 글

https://daunje0.tistory.com/88?category=1028460

[Vue3] props drilling 중간 컴포넌트에서 props 선언 없이 하위로 전달하기