Non-Prop 속성 (fallthrough 속성)

Non-Prop 속성은 props 또는 event 에 명시적으로 선언되지 않은 속성 또는 이벤트 입니다. 예를 들어 class, style, id와 같은 것들이 있습니다.

속성 상속

컴포넌트가 단일 루트 요소로 구성되어 있으면 Non-Prop 속성은 루트 요소의 속성에 자동으로 추가됩니다. 예를 들어 <MyButton> 이라는 컴포넌트가 있다고 가정해보겠습니다.

<!-- template of <MyButton> -->
<button>click me</button>

그리고 이 컴포넌트를 사용하는 부모 컴포넌트는 다음과 같습니다.

<MyButton class="large" />

최종 렌더링된 DOM은 다음과 같습니다.

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

class, style 속성 병합

만약 자식 컴포넌트 루트요소에 이미 class와 style속성이 정의되어 있으면, 부모로 받은 class와 style속성과 병합 합니다.

<!-- template of <MyButton> -->
<button class="btn">click me</button>

최종 병합된 DOM은 다음과 같습니다.

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

v-on 이벤트 리스너 상속

v-on 이벤트 리스너도 동일하게 상속됩니다.

<MyButton @click="onClick" />

• @click 리스너는 <MyButton>의 컴포넌트 루트요소인 <button>요소에 추가됩니다.
• 만약 <button>요소에 이미 바인딩된 이벤트가 있다면 이벤트가 추가되어 두 리스너 모두 트리거 됩니다.