Vue3官方提供了 script setup 语法糖,它是 Vue3 的一个新语法糖，在 setup 函数中。所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。
只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。
<template>
<my-component :num="num" @click="addNum" /></template><script lang="ts" setup>
import { ref } from 'vue';
import MyComponent from './MyComponent .vue';
// 像在平常的setup中一样的写,但是不需要返回任何变量
const num= ref(0) //在此处定义的 num 可以直接使用
const addNum= () => { //函数也可以直接引用,不用在return中返回
num.value++
}</script>//必须使用驼峰命名
因为没有了setup函数，那么props，emit，attrs怎么获取呢
setup script语法糖提供了新的API来供我们使用
defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。
//父组件<template>
<my-son foo="🚀🚀🚀🚀🚀🚀" @change="childClick" /></template><script lang="ts" setup>import MySon from "./MySon.vue";let childClick = (e: any):void => {
console.log(e); //🚀🚀🚀🚀🚀🚀};</script>//子组件<template>
<span @click="sonClick">信息:{{ props.foo }}</span></template><script lang="ts" setup>import { defineEmits, defineProps} from "vue";const emit = defineEmits(["change"]); // 声明触发事件 changeconst props = defineProps({ foo: String }); // 获取propsconsole.log(props)const sonClick = () =>{
emit('change' , props.foo)}</script>
useSlots 和 useAttrs
在
<script setup>import { useSlots, useAttrs } from 'vue'const slots = useSlots()const attrs = useAttrs()</script>
defineExpose
如果在父组件中通过ref='xxx’的方法来获取子组件实例，
子组件使用了script setup语法糖,
则子组件的数据需要用defineExpose 的方式导出，否则不会暴露属性。
//父组件<template>
<Daughter ref="daughter" /></template><script lang="ts" setup>import { ref } from "vue";import Daughter from "./Daughter.vue";const daughter = ref(null)console.log('🚀🚀🚀🚀~daughter',daughter)</script>//子组件<template>
<div>妾身{{ msg }}</div></template><script lang="ts" setup>import { ref ,defineExpose} from "vue";const msg = ref('貂蝉')defineExpose({
msg})</script>
总结：<script setup> 语法糖里面的代码会被编译成组件setup()函数的内容，不需要通过return暴露声明的变量、函数以及import引入的内容，即可在<template/>使用，并且不需要些export default{}
