<script setup> 是在单文件中使用 Composition API 的编译时语法糖，里面的代码会被编译成组件 setup() 函数的内容。
<script setup>中的代码在每次组件实例被创建的时候都都会被执行。
定义数据：
在 <script setup> 语法糖的写法中，顶层的绑定会暴露给模板，因此在 <script setup> 中定义的变量、函数等可以直接使用。不需要像在 setup() 中一样 return 返回。
<template>
<div>{{ message }}</div>
</template>
<!-- 在 <script setup> 中编写 Composition API 就相当于是在 setup() 函数中编写 Composition API -->
<script setup>
import {ref} from 'vue'
// 在 <script setup> 顶层编写的代码都会被暴露给 template 模板，因此在 <script setup> 中定义的变量、函数等不需要像在 setup() 中一样 return 返回，可以直接使用
const message = ref('Hello Vue')
</script>
<style scoped>
</style>
导入组件：
在 <script setup> 语法糖的写法中，导入的组件可以直接使用。不需要像在 setup() 中一样手动通过 components 注册。
<template>
<Home></Home>
</template>
<script setup>
// 导入的组件不需要像在 setup() 中一样手动通过 components 注册，可以直接使用
import {Home} from './components/Home.vue'
</script>
<style scoped>
</style>
接收 props 属性、发出 emit 事件：
在 <script setup> 语法糖的写法中，通过 defineProps() 函数定义要接收的 props；参数是一个对象，定义接收的 props；返回值是一个只读的 props 对象。
defineProps()函数默认就在当前作用域中，不需要导入。
<template>
<div>{{ name }} - {{ age }}</div>
</template>
<script setup>
// 通过 defineProps() 函数定义接收的 props
const props = defineProps({
name: {
type: String,
default: 'Lee',
},
age: {
type: Number,
default: 18,
}
})
console.log(props)
</script>
<style scoped>
</style>
在 <script setup> 语法糖的写法中，通过 defineEmits() 定义要发出的事件；返回值是一个函数，调用返回的函数可以发出事件。
defineEmits()函数默认就在当前作用域中，不需要导入。
<template>
<button @cick="handleUserInfoChange">修改</button>
</template>
<script setup>
// 1. 通过 defineEmits() 定义要发出的事件
const emits = defineEmits(['userInfoChange'])
const handleUserInfoChange = () => {
// 2. 调用 defineEmits() 返回的函数发出手机哦啊吗
emits('userInfoChange', '将名字改为 Tom')
}
</script>
<style scoped>
</style>
暴露数据：
在 <script setup> 语法糖的写法中，组件中的数据、方法等如果想要其他组件能够通过其组件实例获取到，必须通过 defineExpose() 暴露出去。不能像在 setup() 函数中一样直接获取到。
defineExpose()函数默认就在当前作用域中，不需要导入。
// Home.vue
<template>
<Home ref="homeRef"></Home>
<button @click="getComponentData">获取子组件中的数据</button>
</template>
<script setup>
import {ref} from 'vue'
import Home from './components/Home.vue';
const homeRef = ref()
const getComponentData = () => {
console.log(homeRef.value.message)
}
</script>
<style scoped>
</style>
// Home.vie
<template>
<div>Home</div>
</template>
<script setup>
const message = 'Hello Vue'
// 组件中的数据、方法等如果想要其他组件能够通过其组件实例获取，必须通过 defineExpose() 暴露出去
defineExpose({
message,
})
</script>
<style scoped>
</style>