学习script setup 语法糖

首先讲解组合式API：setup()

setup 函数是一个组件选项，在创建组件之前执行，一旦 props 被解析，并作组合式 API 的入口。

BEFORE

setup 选项是一个接收 props 和 context 的函数。此外，我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

NOW 

新的 setup 选项是在组件创建之前, props 被解析之后执行，是组合式 API 的入口。

在添加了setup的script标签中，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default，甚至是自定义指令也可以在我们的template中自动获得。

tip：在 setup 中应该避免使用 this，因为它不会找到组件实例。

要注意的是 "暴露给模板" 不同于 "暴露给外部”

TIP：在使用 Vue 3 生命周期的情况下，整个组件相关的业务代码，都可以放在 setup 里执行。

因为在 setup 之后，其他的生命周期才会被启用.

对比Vue2、Vue3生命周期变化

组件生命周期

可以看到 Vue 2 生命周期里的 beforeCreate 和 created ，在 Vue 3 里已被 setup 替代。

script setup 语法糖

它是 Vue3 的一个新语法糖，在 setup 函数中，所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对之前的写法，语法更简单。

一、自动注册属性和方法无需返回，直接使用

1.

父子组件通信

defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。

父组件

1. //父组件
4. <script setup>
5. import { ref } from 'vue'
6. import Child from '@/components/Child.vue'
7. const msg = ref('parent value')
9. const getChild = (e) => {
10. // 接收父组件传递过来的数据
11. console.log(e); // child value
12. }
13. script>

 子组件

1. //子组件
4. <script setup>
5. // defineEmits,defineProps无需导入，直接使用
6. const emits = defineEmits(['getChild']);
7. //接收父组件传来的props
8. const props = defineProps({
9. title: {
10. type: String,
11. defaule: 'defaule title'
12. }
13. });
14. const toEmits = () => {
15. // 向父组件抛出带参事件getChild（其中参数是child value）
16. emits('getChild', 'child value')
17. }
18. // 获取父组件传递过来的数据
19. console.log(props.title); // parent value
20. script>

• 子组件通过 defineProps 接收父组件传过来的数据
• 子组件通过 defineEmits 定义事件发送信息给父组件

四.useSlots() 和 useAttrs()

获取 slots 和 attrs

1. useAttrs：这是用来获取 attrs 数据，但是这和 vue2 不同，里面包含了 class、属性、方法。

3. const attrs = useAttrs();
6. // 新
7. <script setup>
8. import { useAttrs, useSlots } from 'vue'
9. const attrs = useAttrs()
10. const slots = useSlots()
11. script>

五.defineExpose API

defineExpose ----> [组件暴露出自己的属性]

传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 template模板，谁都不能访问内部的数据和方法。

<script setup>

import HelloWorld from '../components/HelloWorld.vue'

// 在 setup() 作用域中执行 (对每个实例皆如此)

script>

<template>

<div>

<HelloWorld msg="Vue3 + TypeScript + Vite"/>

div>

template>

注意：Vue 3 SFC 一般会自动从组件的文件名推断出组件的 name。在大多数情况下，不需要明确的 name 声明。唯一需要的情况是当你需要 包含或排除或直接检查组件的选项时，你需要这个名字。

---

 

参考文章：https://juejin.cn/post/7209872710155206717 

Vue3 script setup 语法糖-阿里云开发者社区 (aliyun.com)