[Vue3] 폴스루 (fallthrough)

• 폴스루(fallthrough: 대체) 속성
  • 부모 컴포넌트에서 속성 또는 v-on 이벤트 리스너를 전달하고 이것을 받는 컴포넌트의 props 또는 emits에 선언하지 않는 속성
  • 일반적으로 class, style, id 속성이 있다.
• 컴포넌트가 엘리먼트를 렌더링하면 폴스루 속성이 루트 엘리먼트의 속성에 자동으로 추가한다.

---

1. class 병합

• 아래 <MyButton>의 템플릿이 아래와 같이 구성되어 있다.

<!-- <MyButton>의 템플릿 -->
<button>클릭하기</button>

• 부모 컴포넌트에서 <MyButton> 컴포넌트에 class 속성을 추가하면,

<MyButton class="large" />

• 렌더링했을 때 <MyButton> 템플릿은 아래와 같다.

<button class="large">클릭하기</button>

💡 class, style, id 모두 동일하게 병합된다.

---

2. v-on 리스너 상속

• 이전엔 컴포넌트에서 v-on 리스너를 작성하였는데 부모 컴포넌트에서 해당 컴포넌트를 선언할 때 v-on 리스너를 작성할 수 있다.

<MyButton @click="onClick" />

---

3. 속성 상속 비활성화

• 해당 컴포넌트에서 inheritAttrs 옵션을 false로 지정하여 컴포넌트가 자동으로 속성을 상속하지 않게 한다.

export default {
  inheritAttrs: false
}

• $attrs 객체에는 컴포넌트 props 또는 emits 옵션으로 선언되지 않은 모든 속성이 포함된다.

<p>폴스루 속성 : {{ $attrs }}</p>

<!-- 위 <MyButton> 예시로 출력하면 아래와 같은 결과가 나온다. -->
<!-- 폴스루 속성 : { "class": "large" } -->

• props와 달리 폴스루 속성은 자바스크립트에서 작성하는 표기법대로 작성한다.
  • e.g. $attrs['foo-bar'], $attrs.onClick
• 위 <MyButton> 예시처럼 <button> 단일 엘리먼트가 아닌 추가 래핑하는 경우
  • 폴스루 속성이 외부 <div>가 아닌 내부 <button>에 적용을 원할 때 inheritAttrs: false로 설정하고, v-bind="$attrs"로 이를 구현할 수 있다.

<!-- MyButton.vue -->
<template>
  <div>
    <button v-bind="$attrs">클릭하기</button>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  ...
}
</script>

---

4. 다중 루트 노드에서 속성 상속

• 아래와 같이 다중 루트가 있는 컴포넌트에서 속성 상속을 할 경우 명시적으로 바인딩되지 않아 런타임 경고가 발생한다.

<header>...</header>
<main>...</main>
<footer>...</footer>

• $attrs를 명시적으로 바인딩하면 경고가 발생하지 않는다.

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>

---

5. 자바스크립트에서 폴스루 속성 접근

• $attrs 인스턴스 속성을 통해 폴스루 속성에 접근할 수 있다.

export default {
  created() {
    console.log(this.$attrs)
  }
}