defineProps

<template>
  <div>{{ reversedMessage }}</div>
</template>

<script setup>
  import { defineProps } from 'vue'
  const props = defineProps({
    message: String
  })

  // computed 속성을 사용하여 가독성을 높임
  const reversedMessage = computed(() => {
    return props.message.split('').reverse().join('')
  })
</script>

• defineProps 함수를 사용하여 props를 정의한다. defineProps는 객체를 반환하며, 각 속성은 유효성 검사 규칙을 정의한다.
  위의 예제에서는 message props를 정의하고, 이 속성은 문자열 형식이어야 하며 필수 속성으로 선언되었고 또한, 기본값으로 'Hello, World!'를 가진다.
  이렇게 되면 이제 message props를 사용하여 템플릿에서 데이터를 바인딩할 수 있다.

<template>
  <h2>{{ uName }}</h2>
</template>
<script>
import {computed} from "vue";

export default {
  props: ['userName', 'age'],
  setup(props) {
    const uName = computed(()=>{
      return props.userName + props.age
    })

    return {uName}
  },
}
</script>

를

<template>
  <h2>{{ props.userName }}</h2>
  <h3>{{ age }}</h3>
</template>
<script setup>
import {defineProps} from "vue"
const props = defineProps({
  userName: {
    type: String,
    required: true,
  },
  age: {
    type: Number,
    required: true,
  }
})
</script>

로 바꿀 수 있다는 말이다.
이때 Eslint에서 자동으로 사용되지 않으니 당황하지 않고 수동으로 import( import {defineProps} from "vue" )해주면 된다.

https://vuejs.org/guide/typescript/composition-api.html
위 공식문서를 보면 따로 import하지 않아도 된다고 한다.

defineProps에서 prop이 객체일 때

const props = defineProps({
  users : {
    type: Object,
    default : ()=>({id:String, fullName:String, projects:[]})
  }
})

• 위와 같이 type과 default값을 지정해주면 된다.
  또한 이때 default 속성은 반드시 value가 함수로 작성되어야한다.

defineComponent

<template>
  <div>
    <HelloWorld message="Hello, World!" />
  </div>
</template>

<script setup>
  // `defineComponent` 함수를 사용하여 컴포넌트를 정의합니다.
  import HelloWorld from './HelloWorld.vue'
  import { defineComponent } from 'vue'
  const MyComponent = defineComponent({
    components: { HelloWorld }
  })
</script>

• 위의 예제에서는 import 문을 사용하여 HelloWorld 컴포넌트를 가져온다.
  그리고 defineComponent 함수를 사용하여 MyComponent 컴포넌트를 정의한다.
  components 속성을 사용하여 다른 컴포넌트를 등록합니다.

defineEmits

<template>
  <button @click="onButtonClick">Click me!</button>
</template>

<script setup>
  // `defineEmits` 함수를 사용하여 이벤트를 정의합니다.
  import { defineEmits } from 'vue'

  // 이벤트를 정의합니다.
  const emits = defineEmits(['button-click'])

  // 버튼 클릭 이벤트를 처리하는 함수
  const onButtonClick = () => {
    // `emit` 함수를 사용하여 `button-click` 이벤트를 발생시킵니다.
    emits('button-click')
  }
</script>

• 위 코드에서는 defineEmits 함수를 사용하여 button-click 이벤트를 정의하고 있다.
  그리고 onButtonClick 함수 내에서 emit 함수를 사용하여 button-click 이벤트를 발생시키고 있다.

• 위 코드에서는 defineEmits 함수를 사용하여 명시적으로 이벤트를 정의하고 있다.
  defineEmits 함수를 사용하지 않고 emit 함수를 호출할 경우, emit 함수가 전달된 이벤트 이름을 자동으로 검사하여 부모 컴포넌트에서 해당 이벤트를 받을 수 있는지 검사하게 되는데 이 경우에는 defineEmits 함수를 사용하여 이벤트를 명시적으로 정의하는 것이 좋다.

• https://vuejs.org/guide/typescript/composition-api.html
  위 공식문서를 보면 따로 import하지 않아도 된다고 한다.