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