# class와 style이 포함된 $attrs
breaking
# 개요
$attrs는 이제 class와 style를 포함하여, 컴포넌트에 전달되는 모든 속성을 포함합니다.
# 2.x 동작
class와 style 속성은 Vue 2 가상 DOM 구현에서 특별한 몇몇 핸들링을 가집니다. 따라서 위 속성들은 $attrs에 포함되지 않지만, 다른 모든 속성들은 포함됩니다.
inheritAttrs: false를 사용할 때, 이 참조의 사이드이펙트는 다음과 같습니다:
$attrs의 속성은 더이상 루트 엘리먼트에 자동으로 추가되지 않으므로, 개발자가 추가할 위치를 결정할 수 있습니다..- 그러나
$attrs의 일부가 아닌class와style은 컴포넌트의 루트 엘리먼트에 계속 적용됩니다:
<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
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
2
3
# 3.x 동작
$attrs는 모든 속성이 포함되어있어, 모든 속성을 다른 엘리먼트에 더 쉽게 적용할 수 있습니다. 위의 예는 다음 HTML을 생성합니다:
<label>
<input type="text" id="my-id" class="my-class" />
</label>
1
2
3
2
3
# 마이그레이션 방법
inheritAttrs: false을 사용하는 컴포넌트에서, 스타일이 의도한대로 계속 작동하는지 확인하세요. 이전에 class와 style이 특수한 동작에 의존했다면, 이러한 속성이 이제 다른 엘리먼트에 적용될 수 있으므로, 눈에 보이는 부분의 일부가 손상될 수 있습니다.