【vue3】咱就是说，用setup语法糖它不香吗

前言

阅读本文，我默认你已经学习了vue3的基本语法，对composition API有一定了解。常规的写法，需要将模板中要引用的变量和方法在setup钩子中return出来，如果代码体量够大，写return就得费半天劲，而且还得往下翻找return的地方，麻烦死了。这也是很多vue2的小伙伴感觉vue3使用反而更麻烦了的一个很重要的吐槽点。

但是，在vue3.2版本之后，官方推出了setup语法糖，解决了这个问题。妈妈再也不用担心我敲代码敲断手指了~

下面我就给大家总结下setup语法糖的具体用法：

目录

1、基本使用

2、响应式

3、自动注册

4、组件通信

defineProps ：代替props，接收父组件传递的数据（父组件向子组件传参）

defineEmit 代替emit，子组件向父组件传递数据（子组件向外暴露数据）

defineExpose ：子组件暴露自身数据，（父组件获取子组件属性）

5、使用name属性

6、使用useSlots和useAttrs

最后

---

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语法糖学会了没，赶紧去用起来吧~觉得本文对你有帮助，可以三连支持下哦~