컴포넌트 - 속성 상속

• 기본적으로 컴포넌트 태그에 속성을 작성하면 컴포넌트의 최상위 요소에 속성들이 들어간다.

<!-- App.vue -->

<template>
  <BtnComm
    class="jude"
    style="color:blue">
    버튼
  </BtnComm>
</template>

<script>
import BtnComm from '~/components/BtnComm'
export default {
  components: {
    BtnComm
  }
}
</script>

<!-- BtnComm.vue -->

<template>
  <button
    type="button"
    class="btn">
    <slot></slot>
  </button>
</template>

• 하지만 최상위 요소가 2개 이상일 경우 어느 요소에 속성이 들어가야할지 모르기 때문에 적용되지 않는다.

<!-- BtnComm.vue -->

<template>
  <button
    type="button"
    class="btn">
    <slot></slot>
  </button>
  <div>123</div>
</template>

• created 라이프 사이클을 통해 속성들을 내려받아 사용할 수 있다.

<!-- BtnComm.vue -->

<script>
export default {
  created() {
    console.log(this.$attrs)
  }
}
</script>

this.$attr을 콘솔에 찍어보면 아래와 같이 내려 받은 속성들을 찾을 수 있다.

• 아래와 같이 원하는 속성을 원하는 요소에 바인딩할 수도 있고,

<!-- BtnComm.vue -->

<template>
  <button
    type="button"
    class="btn">
    <slot></slot>
  </button>
  <div :class="$attrs.class">
    123
  </div>
</template>

• 아래와 같이 내려받은 속성들을 한꺼번에 바인딩 시킬 수도 있다.

<!-- BtnComm.vue -->

<template>
  <button
    type="button"
    class="btn">
    <slot></slot>
  </button>
  <div v-bind="$attrs">
    123
  </div>
</template>

속성 상속 방지

• inheritAttrs 값을 false로 설정하여 속성 상속을 방지할 수 있다.

<!-- BtnComm.vue -->

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

• 컴포넌트의 속성들이 최상위 요소가 1개여서 자동으로 내려받았는지, 아니면 2개 이상이어서 $attrs를 사용해서 상속 받았는지 컴포넌트를 선언하는 위치에서는 헛갈릴 수 있다.
• 그렇기 때문에 inheritAttrs 속성을 false 값으로 적용해서 암묵적인 속성 상속을 못하게 해놓고, 프로젝트 내에 모든 컴포넌트 속성 상속은 this.$attrs 를 사용한다는 룰을 만들 수 있다.
• 프로젝트가 커질수록 이런 규칙들이 공통화되어있지 않으면 유지보수가 어려워지기 때문에 공통화된 룰을 만드는 것은 중요하다.