Vue.js 문법 - 컴포넌트 속성 상속

 

컴포넌트 속성 상속 

 

App.vue

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

<!-- script 생략 -->

 

MyBtn.vue

<template>
  <div class="btn">
    <slot></slot>
  </div>
</template>

<!-- script, style 생략 -->

 

결과

 

코드 이해하기

- <template> 바로 자식 요소를 최상위 요소(루트 요소) 라고 부름

- 부모 컴포넌트(App.vue)의 속성과 값이 자식 컴포넌트(MyBtn.vue)의 최상위 요소에게 상속됨

- 이러한 개념을 속성 상속이라고 부름

- 최상위 요소가 2개 이상인 경우에는 2개 요소 모두 상속이 되지 않음 (어느 부분에 상속이 되는지 알 수 없기 때문)

 

inheritAttrs

 

MyBtn.vue

<script>
export default {
  inheritAttrs: false
}
</script>

 

코드 이해하기

- <script> inheritAttrs: false 속성의 상속을 사용하지 않는다

- 최상위 요소가 1개라도 상속하지 않음

 

특정한 요소에 상속을 사용하기

 

MyBtn.vue

<template>
  <div class="btn">
    <slot></slot>
  </div>
  <div
    class="btn"
    :class="$attrs.class"
    :style="$attrs.style">
    <slot></slot>
  </div>
</template>

 

결과

 

코드 이해하기

- 2개의 최상위 요소 (왼쪽은 상속 제거, 오른쪽은 상속 적용)

- $attrs 객체를 활용해서 특정한 요소에 특정한 상속을 부여할 수 있다

- 특정 상속이 아닌 모든 상속을 사용하려면 v-bind="$attrs" 를 사용