前言
阅读本文，我默认你已经学习了vue3的基本语法，对composition API有一定了解。常规的写法，需要将模板中要引用的变量和方法在setup钩子中return出来，如果代码体量够大，写return就得费半天劲，而且还得往下翻找return的地方，麻烦死了。这也是很多vue2的小伙伴感觉vue3使用反而更麻烦了的一个很重要的吐槽点。
但是，在vue3.2版本之后，官方推出了setup语法糖，解决了这个问题。妈妈再也不用担心我敲代码敲断手指了~
下面我就给大家总结下setup语法糖的具体用法：
目录
defineProps ：代替props，接收父组件传递的数据（父组件向子组件传参）
defineEmit 代替emit，子组件向父组件传递数据（子组件向外暴露数据）
defineExpose?：子组件暴露自身数据，（父组件获取子组件属性）
1、基本使用
当使用?
<script setup>?的时候，里面的代码会被编译成组件?setup()?函数的内容。这意味着与普通的?<script>?只在组件被首次引入的时候执行一次不同，<script setup>?中的代码会在每次组件实例被创建的时候执行。
当使用?<script setup>?的时候，任何在?<script setup>?声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用：
<script setup>
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
</script>
<template>
<div @click="log">{{ msg }}</div>
</template>2、响应式
ref响应式数据和从?setup()?函数中返回值一样，值在模板中使用的时候会自动解包，不需要用xxx.value取值。
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>3、自动注册
import 导入的内容也会以同样的方式暴露。意味着可以在模板表达式中直接使用导入的 helper 函数，并不需要通过?
methods?选项来暴露它：
这样的话，我们引入组件之后，就不需要在components选项中注册它了，直接就能在模板中使用了。被引入时的变量名直接作为自定义组件的标签名使用。当然了，引入方法，变量也是一样的，直接就能在template里用了。
<template>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
//这里我们引入了子组件 subassembly
import subassembly from './subassembly.vue'
</script>4、组件通信
注意：defineProps,defineEmits,defineExpose这三个api都是可以直接在?<script setup>里使用的，不需要引入。
-
defineProps ：代替props，接收父组件传递的数据（父组件向子组件传参）
代码示例：
父组件代码:
<template>
<div>我是父组件----1</div>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import subassembly from './subassembly.vue'
//把值传递给子组件 ---> :title="msg" <Home @getChili="getChili" :title="msg" />
const msg = ref('父的值')
</script>
复制代码子组件代码：
<template>
<div>我是子组件----2</div>
<div style="color: red">{{props.title}}</div>
</template>
<script setup>
import {defineProps} from 'vue'
//接收父组件 传过来的值！
const props = defineProps({
title: {
type: String
}
});
//打印一下 接收父组件的值
console.log(props.title) //父的值
</script>-
defineEmit 代替emit，子组件向父组件传递数据（子组件向外暴露数据）
代码示例：
子组件代码:
<template>
<hr>
<div>我是子组件----2</div>
<button @click="toEmits">点击传到父组件</button>
</template>
<script setup>
import {defineEmits,ref} from 'vue'
//先定义一下子 在发送值
const emits = defineEmits(['getChili']);
const toEmits = () => {
emits('getChili','子的值')
}
</script>
复制代码父组件代码:
<template>
<div>我是父组件----1</div>
<div>{{data}}</div>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import subassembly from './subassembly.vue'
//空值接收 子组件的传值
let data = ref(null)
const getChili = (e) => {
data.value = e
console.log(e) //子组件的值
}
</script>-
defineExpose?：子组件暴露自身数据，（父组件获取子组件属性）
在标准组件写法里，子组件的数据都是默认隐式暴露给父组件的，但在script-setup模式下，所有数据只是默认return给template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载ref 变量获取子组件的数据。如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由defineExpose来完成。
代码示例：
子组件代码:
<template>
<div>我是子组件----2> {{ xiaoZhi.stator }}</div>
</template>
<script setup>
import {ref, defineExpose, reactive} from 'vue'
let xiaoZhi = reactive({
stator: '小志',
age: 27
})
let xiaoXiaoZhi = ref('小小志');
console.log(xiaoXiaoZhi)
defineExpose({
xiaoZhi,
xiaoXiaoZhi
})
</script>
复制代码父组件代码:
<template>
<button @click="shiEmots">获取暴露</button>
<subassembly ref="shield"/>
</template>
<script setup>
import subassembly from './subassembly.vue'
import {defineEmits,defineProps,ref} from 'vue'
const shield = ref()
const shiEmots = () =>{
//子组件接收暴露出来得值
console.log('接收reactive暴漏出来的值',shield.value.xiaoZhi)
console.log('接收ref暴漏出来的值',shield.value.xiaoXiaoZhi)
}
</script>5、使用name属性
直接在<script setup>标签上写上name属性就好了
<script setup lang="ts" name="xxx"></script>
6、使用useSlots和useAttrs
在?<script setup>?使用?slots?和?attrs?的情况应该是很罕见的，因为可以在模板中通过?$slots?和?$attrs?来访问它们。在你的确需要使用它们的罕见场景中，可以分别用?useSlots?和?useAttrs?两个辅助函数：
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
useSlots?和?useAttrs?是真实的运行时函数，它会返回与?setupContext.slots?和?setupContext.attrs?等价的值，同样也能在普通的组合式 API 中使用。
最后
其他的watch，watchEffect，生命周期啥的和普通的script用法一样，引入使用就行了。
好了，看完本文setup语法糖学会了没，赶紧去用起来吧~觉得本文对你有帮助，可以三连支持下哦~
