Vue 单文件组件 <script setup> API
SFC 组件组合式 API 语法糖 (<script setup>)
1. 导入组件
<script setup>内导入的组件，可以直接在模版中使用。
<template>
<my-com />
</template>
<script setup>
// 导入的组件可以直接在 template 中使用
import MyCom from '@components/MyCom'
</script>
2. 定义 props
<template>
<div>我是子组件 My-Com ： {{ msg }}</div>
</template>
<script setup>
defineProps({
msg: String,
})
</script>
3. 定义事件
子组件：
<template>
<div>我是子组件 My-Com ： {{ msg }}</div>
<button @click="emit('update-msg', 'hi')">update</button>
<!--或者-->
<button @click="deleteMsg">delete</button>
</template>
<script setup>
defineProps({
msg: String,
})
// 定义发出的事件
const emit = defineEmits(['update-msg', 'delete-msg'])
const deleteMsg = () => {
emit('delete-msg')
}
</script>
父组件：
<template>
<!--父组件接收事件的方式也没区别，就是用 @ 接收-->
<my-com :msg="msg" @update-msg="updateFun" @delete-msg="deleteFun"></my-com>
</template>
<script setup>
import { ref } from 'vue'
import MyCom from '@components/MyCom.vue'
// 定义组件状态 和 方法 都和之前没有区别，只是不用 return 出去了
const msg = ref('Hello')
const updateFun = param => {
console.log('update', param)
}
const deleteFun = () => {
msg.value = ''
}
</script>
4. 变量和方法
由第 3 点事件的例子也可以看到，声明在<script setup>顶层的状态、函数，以及 import 引入的变量和方法，都能在模板中直接使用，不用再通过 return 暴露出去。
<script setup>
import { capitalize } from './helpers'
</script>
<template>
<div>{{ capitalize('hello') }}</div>
</template>
5. 对组件外暴露属性
<script setup> 的组件默认不会对外部暴露任何内部声明的属性。如果有部分属性要暴露出去，可以使用 defineExpose 编译器宏：
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
父组件通过模板 ref 获取到子组件的实例，以此访问 MyCom 暴露出去的属性：
<script setup>
import { onMounted, ref } from 'vue'
import MyCom from '@components/MyCom.vue'
const myComRef = ref(null)
onMounted(() => {
console.log(myComRef, myComRef.value.a)
})
</script>
<template>
<my-com :msg="msg" ref="myComRef" />
</template>
6. useSlots 和 useAttrs
等价于组合式 API setup(props, context)的context.slots 和 context.attrs。也可以解构获取：setup(props, {slots,attrs})。它们的使用场景还是很稀少的。
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
7. Top-level await/顶层 await
<script setup> 内可以使用Top-level await，结果代码会被编译成 async setup()。
<script setup>
const post = await fetch(`@api/post/1`).then((r) => r.json())
</script>
