[Vue3] <script setup>

<script setup>

• Single File Components(SFCs) 안에서 Composition API를 사용할 때 아주 좋고 편한 기능
• <script setup> 내에서 선언된 변수는 스크립트내에서뿐만 아니라 template에서도 사용 가능하다.
• Vue 3.2 에서부터 안정적으로 포함됨

<script setup>
 //이렇게 추가된 것도 template에서 사용가능
import { capitalize } from './helpers'

// variable
const msg = 'Hello!' //이 변수 script와 template에서 사용 가능

// functions
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
  <div>{{ capitalize('hello') }}</div>
</template>

• ref, reactive 등의 Reactivity APIs 사용 가능

컴포넌트 사용

• 원래는 컴포넌트 사용을 명시적으로 선언하고 해야하지만 import만 하면 사용 가능함
• 기본 사용

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

• 동적 컴포넌트

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

• 컴포넌트 재귀적 사용

import { FooBar as FooBarChild } from './components'

• 네임스페이스 컴포넌트

<script setup>
import * as Form from './form-components'
</script>

<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

defineProps() & defineEmits()

• 컴파일 매크로에서 사용된다. 따로 impotre 할 필요도 없음

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

defineExpose()

<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)

defineExpose({  a,  b})
</script>

useSlots() & useAttrs()

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>