컴포넌트 - 속성 상속

이전에는 Vue.js의 중요한 개념, 컴포넌트에 대해 알아봤습니다. 이번에는 컴포넌트의 속성 상속의 개념에 대해 살펴봅시다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다.

1. 속성 상속

1.1 클래스 상속

App.vue(부모 컴포넌트)

<MyBtn class="orosy">Banana</MyBtn>

MyBtn.vue(자식 컴포넌트)

<template>
  <!-- <div class ="btn orosy"> -->
  <div class="btn"> // 최상위 요소(Root Element)
    <slot></slot>
  </div>
</template>

위와 같이 부모 컴포넌트의 html 요소에 class 속성으로 값을 입력한 경우, 자식 컴포넌트의 btn이라는 클래스에 상속이 됩니다. 이러한 개념을 속성 상속이라고 합니다.

MyBtn.vue(자식 컴포넌트)

<template>
  <div class="btn"> // 최상위 요소(Root Element)
    <slot></slot>
  </div>
  <div></div> // 최상위 요소(Root Element)
</template>

그러나 유의해야할 점이 있습니다. 위처럼 자식 컴포넌트에 template 태그 안에 있는 최상위 요소가 2개 이상일 경우에는 부모 컴포넌트에 입력한 속성 값이 어느 부분에 상속이 되어야하는지 판단할 수 없기 때문에 두 요소 모두 상속이 되지 않습니다.

1.2 스타일 상속

App.vue(부모 컴포넌트)

 <MyBtn class="orosy" style="color: red;">Banana</MyBtn>

위의 내용처럼 속성 값은 class, style 등 여러 개를 입력할 수 있습니다. 이러한 경우에도 속성 상속은 원활히 이루어집니다.

2. 속성 상속 제거

2.1 inheritAttrs

위에서 알아본 내용처럼 최상위 요소가 1개라면, 속성 상속이 이루어집니다. 그러나 이러한 기능을 없앨 수도 있습니다.

MyBtn.vue(자식 컴포넌트)

<template>
  <div class="btn"> // 최상위 요소(Root Element) 1개
    <slot></slot>
  </div>
</template>

<script>
export default {
  inheritAttrs: false // 속성 상속 제거
}
</script>

이렇게 inheritAttrs(inherit Attributes)의 값을 false로 입력해준다면, 속성 상속의 옵션을 사용하지 않을 수 있습니다.

2.2 $attrs.class

그러나 위와 같이 속성 상속의 옵션을 사용하지 않겠다고 명시한 경우, 필요하다면 개별적으로 속성 상속을 사용할 수 있습니다.

App.vue

<template>
  <MyBtn class="orosy" style="color: red;">
    Banana
  </MyBtn>
</template>

MyBtn.vue

<template>
  <div class="btn">
    <slot></slot>
  </div>
  <h1 :class="$attrs.class"></h1> // 속성 상속
</template>

이처럼 $attrs.class라는 값을 class라는 키워드에 할당해주면 됩니다. 물론, 부모 컴포넌트에 입력한 style 속성도 아래와 마찬가지로 상속이 가능합니다.

MyBtn.vue

<h1
    :class="$attrs.class"
    :style="$attrs.style">
</h1>

하지만 이러한 경우 모든 속성을 입력해주어야 한다는 번거로움이 발생하게 됩니다. 부모 컴포넌트의 모든 속성을 상속하는 방법도 있으며, 이는 <h1 v-bind="$attrs">처럼 v-bind로 약어를 사용하지 않고 그 값에 $attrs를 할당해주면 됩니다.

MyBtn.vue

<h1 v-bind="$attrs"></h1>

이처럼 class와 style의 속성인 color까지 상속을 통해 모두 적용된 것을 확인할 수 있습니다.