# classstyle이 포함된 $attrs
breaking

# 개요

$attrs는 이제 classstyle를 포함하여, 컴포넌트에 전달되는 모든 속성을 포함합니다.

# 2.x 동작

classstyle 속성은 Vue 2 가상 DOM 구현에서 특별한 몇몇 핸들링을 가집니다. 따라서 위 속성들은 $attrs에 포함되지 않지만, 다른 모든 속성들은 포함됩니다.

inheritAttrs: false를 사용할 때, 이 참조의 사이드이펙트는 다음과 같습니다:

  • $attrs의 속성은 더이상 루트 엘리먼트에 자동으로 추가되지 않으므로, 개발자가 추가할 위치를 결정할 수 있습니다..
  • 그러나 $attrs의 일부가 아닌 classstyle은 컴포넌트의 루트 엘리먼트에 계속 적용됩니다:
<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>
1
2
3
4
5
6
7
8
9
10

이렇게 사용하면:

<my-component id="my-id" class="my-class"></my-component>
1

...이러한 HTML을 생성합니다:

<label class="my-class">
  <input type="text" id="my-id" />
</label>
1
2
3

# 3.x 동작

$attrs모든 속성이 포함되어있어, 모든 속성을 다른 엘리먼트에 더 쉽게 적용할 수 있습니다. 위의 예는 다음 HTML을 생성합니다:

<label>
  <input type="text" id="my-id" class="my-class" />
</label>
1
2
3

# 마이그레이션 방법

inheritAttrs: false을 사용하는 컴포넌트에서, 스타일이 의도한대로 계속 작동하는지 확인하세요. 이전에 classstyle이 특수한 동작에 의존했다면, 이러한 속성이 이제 다른 엘리먼트에 적용될 수 있으므로, 눈에 보이는 부분의 일부가 손상될 수 있습니다.

# See also

Deployed on Netlify.
Last updated: 2021-01-13, 05:23:36 UTC