《Vue3 八》＜script setup＞ 语法

<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>