[Vue.js] $attrs 속성을 사용하여 클래스 적용하기

<template>
  <div>
    <!-- MyComponent 템플릿에서 $attrs 속성을 사용하여 클래스를 적용하는 예제 -->
    <p :class="$attrs.class">안녕!</p>
    <span>반가워!</span>
  </div>
</template>

<script setup>
// 컴포넌트 속성에 접근하기 위해 $attrs를 가져옵니다.
const { $attrs } = getCurrentInstance();
</script>

<style scoped>
/* 컴포넌트의 스타일을 여기에 작성합니다. */
</style>

Vue.js에서 여러 개의 최상위 엘리먼트로 구성된 컴포넌트에서 클래스를 적용하는 방법에 대해 알아봅시다.

위의 예제는 $attrs 속성을 사용하여 클래스를 적용하는 방법을 보여줍니다. MyComponent 템플릿에서 <p> 요소에 클래스를 적용하는 예제입니다. <p> 요소에 :class="$attrs.class"를 사용하여 MyComponent에 전달된 클래스 속성을 적용합니다. 이를 통해 부모 컴포넌트에서 MyComponent에 클래스를 동적으로 전달할 수 있습니다.

$attrs 속성은 현재 컴포넌트의 속성을 제외한 나머지 속성을 포함하고 있습니다. 따라서 이를 사용하여 부모 컴포넌트에서 동적으로 클래스를 전달할 수 있습니다. 이는 컴포넌트의 재사용성을 높이고 유연성을 제공합니다.