21. Vue - 속성 상속

1. Attribute Inheritance

- 우선 예제코드를 살펴보자. 

 

[App.vue]

<template>
  <MyBtn class="test">
    Banana
  </MyBtn>
</template>

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

 

[MyBtn.vue]

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

<script>
export default {
}
</script>

<style scoped lang="scss">
  .btn {
    display: inline-block;
    margin: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: gray;
    color: white;
    cursor: pointer;
  }
</style>

 

[출력화면]

- 출력화면을 살펴보면 다음과 같이 클래스 속성에 btn과 test 속성이 들어가 있는 것을 확인할 수 있다. 

- 해당 버튼 아래에 다른 요소를 삽입하면 다음과 같은 결과를 출력하는데, 

- 기존에 존재하던 버튼에 test라는 클래스 속성이 사라진 것을 확인할 수 있다. 

- 이유가 무엇일까? 

 

a) 최상위 요소

- HTML을 작성할 때, Vue에서는 template 태그에 작성하게 된다. 

- template 태그의 자식요소를 '최상위 요소(= Root)'라고 부르는데, 위의 코드에서는 최상위 요소가 2개(= div 2개)가 있는 것이다.

- 이처럼 최상위 요소가 하나 이상인 경우에는 App.vue에서 작성한 MyBtn 태그가 어디로 할당되어야 할지 결정을 못하게 된다. 

- 그로인해 test라는 클래스 속성값이 할당되지 못하고 랜더링된 것이다. 

- 정리하자면, 최상위 요소의 개수에 따라서 코딩방식이 달라지는 것을 유념해야 한다. 

- 추가적으로 App.vue의 정보를 컴포넌트에서 받아 랜더링되는 것을 속성의 상속이라고 부른다. 

 

 

b) inheritAttrs

- inheritAttrs 속성은 boolean 타입으로 값을 설정할 수 있다.

- 이 속성의 기능은 이름 그대로 속성 상속을 받을 것인지 말 것인지를 지정하는 것이다. 

- 다음 사진을 참고하자. 

- 최상위 요소가 하나 뿐이지만 inheritAttrs 속성을 false로 설정해놔서 속성의 상속이 되지 않는 것을 확인할 수 있다. 

 

 

c) 최상위 요소가 여러개인 경우

- 최상위 요소가 여러개라서 특정한 최상위 요소에 속성을 상속하고 싶다면 어떻게 해야할까? 

- attr이라는 속성값을 사용하면 된다. 다음 사진을 살펴보자. 

- 실제로 보이지는 않지만, 각 컴포넌트는 생성과 동시에 attr이라는 객체를 내포하고 있다. 

- 이를 이용해서 특정 요소에게 속성을 상속하도록 하는 방법이 위와같은 방법이다. 

- 각 컴포넌트의 생성과 동시에 attr이라는 객체를 내포하고 있다면, 라이프 사이클을 이용해서 확인할 수 있지 않을까? 

- create()라는 라이프 사이틀을 사용하여 attr 객체의 내용을 살펴보자. 

 

- 만약 attr 객체가 갖고 있는 모든 속성을 상속받고 싶다면 위의 예시와는 다른 방법으로 할 수 있다. 

- 한번 이렇게 설정해놓으면 추가 속성이 삽입되어도 반응성의 영향으로 알아서 내용이 갱신이 된다.