Non-Prop속성 (fallthrough 속성)

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

1. 속성 상속

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

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

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

<MyButton class="large">

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

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

1-1. class, style 속성 병합

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

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

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

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

1-2. v-on 이벤트 리스너 상속

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

<MyButton @click="onClick">

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

1-3. 속성 상속 비활성화

• 컴포넌트가 자동으로 Non-Prop 속성을 상속하지 않도록 하려면 컴포넌트의 inheritAttrs: false 옵션을 설정할 수 있다.

<template>
  <button class="btn" data-link="hello">Click me</button>
</template>
<script>
  export default{
  	inheritAttrs: false,
  }
</script>

컴포넌트에 Non-Prop 속성을 비활성화 하는 일반적인 경우는 자식 컴포넌트의 루트요소에 이외의 다른 요소에 Non-Prop 속성을 적용하고 싶을 때다.

그리고 적용해야 하는 요소에 <template>에서 Non-Prop속성에 접근할 수 있는 내장 객체 $attrs로 직접 접근할 수 있다.

<template>
  <p>fallthrough 속성: {{ $ attrs }}</p>
</template>

$attrs객체에는 컴포넌트에 선언되지 않은 모든 속석 props, emits(예:class, style, v-on등)을 포함하고 있습니다.

몇가지 참고 사항:

• props와 달리 Non-prop 속성은 JavaScript에서 원래 대소문자를 유지하므로 foo-bar와 같은 속성은 $attrs['foo-bar']로 접근해야한다.
• @click과 같은 v-on리스너는 $attrs.onClick과 같이 함수로 접근할 수 있다.