[Vue.js] $attrs

 

◽ $attrs

<input v-bind="$attrs" />

Vue 2의 $attrs은 부모가 class, style 속성을 제외하고 모든 속성들을 자식에게 넘겨주는 속성이다. 

Vue 3의 $attrs은 class, style 속성을 포함하여 모든 속성들을 자식에게 넘겨준다. 또한 자식에서 부모에게 전달되는 이벤트를 모아놓은 $listeners가 사라지고 $attrs 안으로 이벤트가 존재한다.

 

 

◽ $attrs 예제

📄 부모 컴포넌트

<template>
  <div class="inner">
    <p class="test-title">attrs</p>
    <c-hamburger
      :visible="true"
      class="hamburget-attrs"
      menu1="메뉴1"
      menu2="메뉴2"
      :menu3="createMenu('메뉴3')"
    ></c-hamburger>
  </div>
</template>

 

📄 자식 컴포넌트

<template>
  <div v-show="visible" :visible.sync="visible">
    <ul class="hamburger-list" v-bind="$attrs">
      <li>
        <!-- 이렇게 가져올 수 있다. -->
        <span>{{ $attrs.menu1 }}</span>
      </li>
      <li>
        <span>{{ $attrs.menu3 }}</span>
      </li>
    </ul>
  </div>
</template>

 

 

◽ inheritAttrs: true/false

부모컴포넌트에서 오는 속성이 자식컴포넌트에 상속되는 것을 막는다.

export default {
  inheritAttrs: false,
}

 

 

 

 

출처

[Vue.js] 새로운 v-model 살펴보기#4 ($attrs, $listeners)

https://v3.ko.vuejs.org/api/instance-properties.html#refs