vue3, nuxt3 $attrs에 대해서

fallthrough 속성은 props, emits에서 명시적으로 선언되지 않은 속성을 말한다.
ex) class, style, id 속성 등

나는 부모 page에서 class style id 이 자식 컴포넌트 root element에 적용되는건 알고 있었지만 무슨 매직으로 적용되는지는 모르고 있었다.

기본적으로 컴포넌트에는 자동 속성 상속이 활성화 되어있어서 루트로 자동으로 들어가는거였다!
-> inheritAttrs = ture 가 기본값

이제 어떻게 동작하는지 알았으니 그동안 하고싶었던 하위 컴포넌트로 속성 상속을 할수 있게 되었다.

바로 $attrs 이다.

<div class="btn-wrapper"> 
  <button class="btn" v-bind="$attrs">클릭하기</button>
</div>

기본값인 inheritAttrs를 끄지 않으면 루트와 하위 attrs에 같이 상속된다.

중복 상속을 막으려면 inheritAttrs속성을 꺼야한다.

또 다중루트일때는 inheritAttrs속성이 자동으로 꺼져있으니 $attrs를 명시적으로 선언을 해줘야 에러가 나지 않는다

vue에서는

export default{
  inheritAttrs:false,
}

nuxt3에서는
vue-macros 라이브러리를 설치하거나

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {},
  }
</script>

<script setup>
  // script setup logic
</script>

or

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {},
    setup() {
      // script setup logic
    },
  }
</script>

와같이 설정하면 된다!!