Non-Prop 속성

• props 또는 event 에 명시적으로 선언되지 않은 속성 또는 이벤트 ( class , style , id 와 같은 것들

속성 상속

컴포넌트가 단일 루트 요소로 구성되어 있으면 Non-Prop 속성은 루트 요소의 속성에 자동으로 추가

• 자식 컴포넌트 루트요소에 class , style 속성이 정의되어 있으면, 부모로 받은 class,style 속성과 병합됨
• v-on 이벤트 리스터도 상속됨

속성 상속 비활성화

• 컴포넌트의 inheritAttrs: false으로 설정
• <template>에서 Non-Prop 속성에 접근할 수 있는 내장 객체 $attrs로 직접 접근( $attrs에는 컴포넌트에 선언되지 않은 속성을 포함하고 있다.)

Fragments

Vue3 에서 컴포넌트는 다중 루트 노드 컴포넌트인 fragments를 공식 지원

자바스크립트에서 Non-Prop 접근

setup() 함수의 context.attrs속성으로 노출

예제

<template>
  <main>
    <div class="container py-4">
      <Mybutton @click="sayHello" class="my-btn" id="my-btn"></Mybutton>
      <LabelInput label="이름"></LabelInput>
    </div>
  </main>
</template>
<script>
import LabelInput from "./LabelInput.vue";
import Mybutton from "./Mybutton.vue";

export default {
  components: {
    Mybutton,
    LabelInput,
  },
  setup() {
    const sayHello = () => {
      alert("안녕하세요");
    };
    return { sayHello };
  },
};
</script>

<style lang="scss" scoped></style>

<template>
  <div class="p-3 bg-danger">
    <button type="button" class="btn btn-primary" v-bind="$attrs">
      Mybutton
    </button>
    <!-- {{$attrs}} -->
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  setup(props, context) {
    console.log(context.attrs);
    console.log(context.attrs.class);
    return {};
  },
};
</script>

<style lang="scss" scoped></style>