学习script setup 语法糖

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

**

setup

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

BEFORE

setup

选项是一个接收

props

和

context

的函数。此外，我们将

setup

返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

<script>
// 这是一个基于 TypeScript 的 Vue 组件
import { defineComponent } from 'vue'
export default defineComponent({
  setup(props, context) {
    // 在这里声明数据，或者编写函数并在这里执行它
    return {
      // 需要给 `<template />` 用的数据或函数，在这里 `return` 出去
    }
  },
})
</script>

NOW

新的

setup

选项是在组件创建之前,

props

被解析之后执行，是组合式 API 的入口。

在添加了setup的script标签中，组件只需引入不用注册，属性和方法也不用返回，也**不用写

setup

函数，也不用写

export default

**，甚至是自定义指令也可以在我们的

template

中自动获得。

tip：在

setup

中应该**避免使用

this

**，因为它不会找到组件实例。

<script setup>

...

</script>

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

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

setup

里执行。

因为在

setup

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

对比Vue2、Vue3生命周期变化

组件生命周期

Vue 2 生命周期Vue 3 生命周期执行时间说明beforeCreatesetup组件创建前执行createdsetup组件创建后执行beforeMountonBeforeMount组件挂载到节点上之前执行mountedonMounted组件挂载完成后执行beforeUpdateonBeforeUpdate组件更新之前执行updatedonUpdated组件更新完成之后执行beforeDestroyonBeforeUnmount组件卸载之前执行destroyedonUnmounted组件卸载完成后执行errorCapturedonErrorCaptured当捕获一个来自子孙组件的异常时激活钩子函数
可以看到 Vue 2 生命周期里的

beforeCreate

和

created

，在 Vue 3 里已被

setup

替代。

script setup 语法糖

它是 Vue3 的一个新语法糖，在

setup

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

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

1. <script setup>
   

   语法糖并不是新增的功能模块，它只是简化了以往的组合API的必须返回（return）的写法，并且有更好的运行时性能。

2.在 setup 函数中：所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。

使用方式：在 script 标签加上 setup 关键字即可

<template>
  <div class="home">
    值：{{flag }}
    <button @click="change">修改值</button>
  </div>
</template>

<!-- 只需要在script上添加setup -->
<script lang="ts" setup>

    import { ref } from 'vue';

    <!-- flag变量不需要在 return出去了 -->
    let flag=ref("啦啊啦啦啦啦")

    <!-- 函数也可以直接引用,不用在return中返回 -->
    let change=():void=>{
        flag.value='略略略略略略略略'
    }

</script>

二.组件自动注册

在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。

示例：

<template>
  <div class="home">
    <test-com></test-com>
  </div>
</template>

<script lang="ts" setup>

// 组件命名采用的是大驼峰，引入后不需要在注册
// 在使用的使用直接是小写和横杠的方式连接 test-com
import TestCom from "../components/TestCom.vue"

</script>

三.defineProps 和 defineEmits

不需要使用

setup

函数,那么子组件怎么接受父组件传递过来的值呢？props，emit怎么获取呢？

当当当当！**defineProps**

1.

**defineProps**

defineProps ----> [用来接收父组件传来的 props]

通过

defineProps

指定当前 props 类型，获得上下文的props对象。

示例：

父组件传递参数：

<template>
  <div class="box">
    <test-com :info="msg" time="42分钟"></test-com>
  </div>
</template>

<script lang="ts" setup>
import TestCom from "../components/TestCom.vue"
let msg='今天是2023年3月14日'

</script>

子组件接受参数：

<template>
    <div>
        <h2> 啦啦啦啦啦啦啦啦</h2>
        <p>信息: {{ info}}</p>
        <p> {{ time }}</p>
    </div>
</template>

<script lang="ts" setup>

import {defineProps} from 'vue'

defineProps({
    info:{
        type:String,
        default:'----'
    },
    time:{
        type:String,
        default:'0分钟'
    },
})

</script>

解决了父组件向子组件传值，那么子组件怎么向父组件抛出事件？

1. ```

defineEmits

#### 定义 emit

defineEmit ----> [子组件向父组件事件传递]

使用

defineEmit

定义当前组件含有的事件，并通过返回的上下文去执行 emit。

**代码示列**：

#### 父子组件通信

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

父组件

//父组件
<template>
//监听子组件的getChild方法，传msg给子组件
<Child @getChild="getChild" :title="msg" />
</template>

 子组件

//子组件
<template>
<div @click="toEmits">Child Components