###
Vue 3 中 `
setup`
语法糖的使用指南
#### 什么是 `
setup`
语法糖？
Vue 3 的 `<
script setup>` 是一种新的
语法糖，它简化了组件开发流程。通过这种
语法糖，开发者无需显式调用 `
setup()` 函数或手动返回对象即可直接访问响应式数据
和方法[^1]。
---
#### 基础用法
以下是 `<
script setup>` 的基本结构：
```html
<
script setup>
import { ref, reactive } from &#
39;
vue&#
39;
// 定义响应式数据
const count = ref(0)
// 定义复杂状态管理
const state = reactive({
name: &#
39;
Vue&#
39;,
version:
3,
})
// 自定义方法
const increment = () => {
count
.value++
}
</
script>
<template>
<div>
<h1>{{ state
.name }} {{ state
.version }}</h1>
<p>Count is: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
```
在这个例子中，`count`
和 `state` 都可以在模板中直接使用而无需显式的 `
return {}` 操作[^2]。
---
#### 组件间的通信
当父组件需要操作子组件的状态时，可以通过 `defineExpose` 显式暴露特定的数据或方法给外部引用[^5]。
##### 子组件 (Child
.vue)
```html
<
script setup>
import { reactive, toRefs } from &#
39;
vue&#
39;
const data = reactive({
modelVisible: false,
})
defineExpose({
...toRefs(data) })
</
script>
<template>
<p v-if="modelVisible">Model Visible!</p>
</template>
```
##### 父组件 (Parent
.vue)
```html
<
script setup>
import Child from &#
39;
./Child
.vue&#
39;
import { ref } from &#
39;
vue&#
39;
const childRef = ref(null)
const toggleVisibility = () => {
if (childRef
.value) {
childRef
.value
.modelVisible = !childRef
.value
.modelVisible
}
}
</
script>
<template>
<Child ref="childRef" />
<button @click="toggleVisibility">Toggle Visibility</button>
</template>
```
在这里，`defineExpose` 将子组件的部分状态暴露给了父组件，从而实现了跨组件交互。
---
#### 属性绑定与事件监听
在 `<
script setup>` 中，属性 (`props`)
和事件 (`emits`) 可以通过解构的方式直接声明并使用[^4]。
##### 示例代码
```html
<
script setup>
import { defineProps, defineEmits } from &#
39;
vue&#
39;
// 解构 props
const props = defineProps([&#
39;title&#
39;])
// 定义 emits
const emit = defineEmits([&#
39;update:title&#
39;])
</
script>
<template>
<div>
<h1>{{ title }}</h1>
<input :value="title" @input="$emit(&#
39;update:title&#
39;, $event
.target
.value)" />
</div>
</template>
```
此示例展示了如何利用 `defineProps` 接收父级传递的参数，并通过 `defineEmits` 向外发送事件通知[^4]。
---
#### 路由集成
对于基于
Vue Router 的项目，在 `<
script setup>` 下依然能够轻松实现动态路由跳转等功能[^
3]。
```html
<
script setup>
import { useRouter } from &#
39;
vue-router&#
39;
const router = useRouter()
function navigateToHome() {
router
.push(&#
39;/&#
39;)
}
</
script>
<template>
<button @click="navigateToHome">Go Home</button>
</template>
```
上述片段说明了如何借助组合 API 提供的功能完成页面导航逻辑。
---
### 总结
综上所述，
Vue 3 的 `<
script setup>` 不仅大幅减少了样板代码量，还提升了可读性
和维护效率。无论是简单的 UI 渲染还是复杂的业务场景处理，都可以依靠这一特性快速构建高效的应用程序[^1]^。
---
Vue3引入了`setup`语法糖，通过在`<script setup>`标签中使用，可以省略组件注册、属性和方法的返回。本文介绍了`defineProps`、`defineEmits`和`useContext`这三个新API的用途，帮助开发者更便捷地处理父组件传值、声明事件和获取组件上下文。同时，展示了如何在使用语法糖后，无需配合`async`即可直接使用`await`，并提到了CSS变量注入和`nextTick`在路由导航守卫中的应用。
最低0.47元/天 解锁文章
扫一扫
3345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
