컴포넌트-속성상속

template

• App.vue

  Mybtn에 onehousesilver를 2번째 class로 추가

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

<script>
import MyBtn from '~/components/MyBtn'

export default {
  components: {
    MyBtn
  },
}
</script>

• My Btn.vue

  원래는 class에 btn 다음으로 onehousesilver이 같이 붙었는데 지금은 onehousesilver class가 없어진 상태. 왜 이렇게 되었을까?

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

<script>
export default {
}
</script>

💡 이유는 template에 붙은 <div></div> 때문

그 전에 구조를 알아보자!

template 바로 아래 기본적인 html구조를 작성하게 되는데 template의 바로 자식 요소를 해당하는 component의 최상위 요소(루트요소)라고 부른다. 위의 경우는 최상위 요소가 <div class="btn"><slot></slot></div> 와 <div></div>로 총 2개인 상황

이로인해 어떤 최상위 요소로 들어갈지 모르기 때문에 어떠한 최상위 요소에도 들어가지 않는다.
반대로 최상위 요소를 하나만 남겨놓는다면 바로 그 해당 요소에 적용이 되어 출력된다. 속성들이 하나의 요소에 연결되는 것을 속성의 상속이라고 한다. 여기 예시에서는 MyBtn.vue의 요소들이 App.vue에서 상속받아 출력된다.

하나의 컴포넌트를 만들때 최상위 요소가 몇개인지에 따라 코딩 방식이 달라질수 있다는 것을 전제해야한다.

ingeritAttrs

최상위 요소가 하나임에도 불구하고 상속하지 않겠다!
inheritAttrs를 false로 선언
이 경우에는 최상위 요소가 하나임에도 불구하고 상속되지 않는다.

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

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

$attrs

최상위 요소가 여러개 일 때 원하는 요소를 연결해준다.
특히 class, style등 원하는 요소를 하나씩 연결해준다.

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

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

v-bind=$attrs

만약 모두 연결할려면?
v-bind를 사용하면 되는데 여기에 주의사항이 있다.
v-bind를 약어로 사용하지 않고 모두 적어서 표기할 것!
이렇게 입력해놓으면 표기하는 족족 따로 명시해주지 않아도 안으로 들어온다.

<template>
  <div 
    class="btn">
    <slot></slot>
  </div>
  <h1 v-bind="$attrs"></h1>
</template>

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