Vue의 Non-Prop 속성 (fallthrough) 간단 정리 | 속성 상속 비활성화 방법

Non-Prop 속성 (fallthrough 속성)

 props 또는 event 에 명시적으로 선언되지 않은 속성 또는 이벤트를 말한다.

예를 들면 class, style, id가 있다.

 

 

😄 속성 상속, 병합

컴포넌트가 단일 루트 요소로 구성되어 있으면 non-prop 속성은 Root 요소의 속성에 자동으로 추가된다.

즉, 자식 컴포넌트는 부모 컴포넌트의 요소를 상속받는다.

 

부모 컴포넌트에서 class와 style을 자식 컴포넌트 속성에 추가했을때

자식 컴포넌트에 이미 class와 style 속성이 정의되어 있다면 병합한다.

 

<button class="btn">click me</button>

자식 컴포넌트에서 btn 클래스의 button 생성

 

<자식컴포넌트 class="large" />

부모 컴포넌트에서 large 클래스의 자식 컴포넌트를 가져왔다.

 

<button class="btn large">click me</button>

렌더링된 최종 DOM

자식 컴포넌트에 작성한 class과 부모 컴포넌트에서 작성한 class가 merge 되었다.

 

이렇게 자식 컴포넌트의 root에 상속된다는 걸 주의하자

참고로 vue3는 다중 루트노드가 가능해서 다중 루트노드일경우 런타임 에러 발생하게 된다.

 

 

😄 속성 상속 비활성화

export default {
	inheritAttrs: false,
};

속성 상속을 비활성화하기 위해서는 inheritAttrs 옵션을 false로 설정하면 된다.

그럼 컴포넌트가 자동으로 해당 non-prop 속성을 상속하지 않도록 설정된다.

 

 

😄 특정 요소에 Non-prop 속성 적용

<template>
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
</template>

inheritAttrs을 설정하고나서 원하는 요소에 상속하고싶다면 $attrs 사용한다.

원하는 요소에 v-bind="$attrs" 추가하면 된다.