// template 의 첫 자식요소를 root, 최상위 요소 라고 한다.
// 부모 컴포넌트에서 html 구조의 속성들을 자식 컴포넌트에서 상속한다.
// 그렇지만 자식 컴포넌트에서 여러개의 자식요소가 있다면 부모에서는
// 어떤 것에 상속시켜줘야 할 지 모르기 때문에 이때는 상속하지 않는다.

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

// 상속하지 않겠다고 바꿔준다.

// 그렇다면 내가 원하는 곳에 상속받게 하려면?
// $attrs: root 요소가 하나 이상이거나 하나밖에 없을 때
inheritAttrs: false
// 해주고, 실제로 들어오는 속성들을 내가 원하는 요소에 연결하고 싶을 때 사용한다.
<h1
	:class="$attrs.class"
	:stlye=$attrs.style"><h1>  ===  <h1 v-bind="$attrs"></h1> 

// App.vue
<template>
  <MyBtn
    class="heropy"
    style="color: red;"
    title="Hello World">
    Banana
  </MyBtn>
</template>

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

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

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

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

// 다음과 같이 h1 이 생성된다.
<h1 class="heropy" data-v-ce4a.. style="color: red;" title="Hello World"></h1>