컴포넌트 속성 상속

컴포넌트를 사용할 때 컴포넌트 내부에 최상위 객체(template 바로 밑 요소)가 한개 이상일 경우 컴포넌트를 사용하는 쪽에서 스타일이나 클래스같은 속성을 직접적으로 선언하여도 적용이 안된다. 따라서 컴포넌트 쪽에 설정을 추가하여 

사용자가 원하는 속성을 적용 시킬 수 있다.

 

script 부분

// 컴포넌트를 사용하는 쪽에서 속성을 지정할 때 사용여부
  inheritAttrs: false,

 

Html 부분

  <!-- App.vue 파일에서 지정한 속성중 원하는 속성만 사용하는 방법 -->
  <h1
    :class="$attrs.class"
    :style="$attrs.style">
    App.vue 파일에서 지정한 속성중 원하는 속성만 사용하는 방법
  </h1>
  <!-- 속성을 한번에 적용하는 방법 -->
  <h1 v-bind="$attrs">
    속성을 한번에 적용하는 방법
  </h1>

 

App.vue 코드

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

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

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

 

컴포넌트 파일(MyBtn2.vue)

<template>
  <div
    class="btn">
    <slot></slot>
  </div>
  <!-- App.vue 파일에서 지정한 속성중 원하는 속성만 사용하는 방법 -->
  <h1
    :class="$attrs.class"
    :style="$attrs.style">
    App.vue 파일에서 지정한 속성중 원하는 속성만 사용하는 방법
  </h1>
  <!-- 속성을 한번에 적용하는 방법 -->
  <h1 v-bind="$attrs">
    속성을 한번에 적용하는 방법
  </h1>
</template>

<script>
export default {
  // 컴포넌트를 사용하는 쪽에서 속성을 지정할 때 사용여부
  inheritAttrs: false,
  // 컴포넌트가 생성된 직 후
  created() {
    console.log(this.$attrs)
  }
  
}
</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>

 

브라우저 확인

콘솔 확인