nonProps

기본

ex)class, style, v-on
부모Component

<MyButton class="hello"></MyButton>

MyButton.vue

<template>
  <button>
    test button
  </button>
</template>

자동으로 nonProps 속성을 상속받고 싶지 않으면 => inheritAttrs: false선언

만약 root element가 두개이상이면?

MyButton.vue

<template>
  <div>
    root div
  </div>
  <button>
    test button
  </button>
</template>

위와 같이 두개이상의 root element가 있다면 부모 Component가 어떤 element에게 전달해야할지 모르므로 console에 경고메세지가 나타난다

{{ $attrs }}를 사용하자

<template>
  <div>
    root div
  </div>
  <button v-bind="$attrs">
    test button
  </button>
</template>

<button :class="$attrs.class">
  test button
</button>

요런식으로 attrs에서 개별적으로 가져오는 것도 가능. click이벤트는 attrs.onClick이다

emit함수는 왜 emit에 등록해야하나

자식 Component에서 emit함수를 통해 “click”이라는 이벤트를 전달하려한다

<template>
  <div>
    root div
  </div>
  <button v-bind="$attrs" @click="$emit('click')">
    test button
  </button>
</template>

부모 Component에서 자식Componet로부터 “click”이라는 이벤트를 전달받으면 sayHello이벤트를 실행한다

<script setup>
  import { ref } from 'vue'
  import MyButton from './MyButton.vue'
  const sayHello= () => alert("hello");
</script>

<template>
  <MyButton class="hello" @click="sayHello"></MyButton>
</template>

이제 버튼을 클릭하면 alert()가 한번 실행되어야하는데 두번이 실행된다
그 이유는? 부모Component에서 선언한 v-on 즉,@click이 자식Component에게 상속되기때문이다!
그렇기때문에 emit에 따로 등록해줘야한다

const emit = defineEmits({
  'click': null, 
  
})

cf) 만약 자식Componet가 <button v-bind="$attrs" @click="$emit('sayHelloSign')">라면 부모는 <MyButton class="hello" @sayHeeloSign="sayHello"></MyButton>으로 되겠지?

참고자료: Vue3 완벽 마스터: 기초부터 실전까지 - “기본편”

소스코드 바로확인하기