setup语法糖

模板中用到东西无需return

1、变量、方法不需要 return 出来

属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得

<script setup>
    import { ref } from 'vue';
 
    <!-- flag变量不需要在 return出去了 -->
    let flag = ref("ABCD")
 
    <!-- 函数也可以直接引用,不用在return中返回 -->
    let changeHander = ()=>{
        flag.value='qwe'
    }
</script>

2、组件不需要在注册

使用组件，只需要引入组件就可以直接使用，不需要再在components中注册（组件命名采用的是大驼峰）

在 script setup 语法糖中，引入的组件可以自动注册，不需要再通过 components 进行注册，而且无法指定当前组件的名字，会自动以文件名为主，省去了 name 属性。

<template>
 <SetUp></SetUp>
 <set-up></set-up>
</template>
<script setup>
 import SetUp from "./SetUp.vue"
</script>

3、组件数据传递

父组件给子组件传值时，需要 props 接收。setup( props, context )接收两个参数，props 接收传递的数据，使用 setup() 接收数据如下

<template>
 {
   
   { a }} {
   
   { b }}
</template>
 
<script>
import { toRefs } from "vue"
export default {
 setup(props,context){
  const { a,b } = toRefs(props)
  return {
   a,
   b
  }
 }
}
</script>

而 script setup 语法糖接收 props 中的数据时，使用 defineProps 方法来获取，可以修改上述代码为：

defineProps 组件传参

父组件传参：

<template>
  <div class="home">
    <test-com :info="msg" time="42分钟"></test-com>
  </div>
</template>
 
<script setup>
    import TestCom from "../components/TestCom.vue"
    let msg='消息'
</script>

子组件接收参数：

<script setup>
    import {defineProps} from 'vue'
    defineProps({
        info:{
            type:String,
            default:'----'
        },
        time:{
            type:String,
            default:'0分钟'
        },
    })
</script>

defineEmits 组件抛出事件

父组件：

<template>
  <div class="home">
    <test-com @myAdd="myAddHander" @myDel='myDelHander'></test-com>
  </div>
</template>
 
<script setup>
    import TestCom from "../components/TestCom.vue"
    let myAddHander=(mess)=>{
      console.log('新增==>',mess);
    }
    let myDelHander=(mess)=>{
      console.log('删除==>', mess);
    }
</script>

子组件接收：

<template>
    <div>
        <h2> 你好 </h2>
        <button @click="hander1Click">新增</button>
        <button @click="hander2Click">删除</button>
    </div>
</template>
 
<script setup>
    import {defineEmits} from 'vue'
    //  使用defineEmits创建名称，接收一个数组
    let $myemit=defineEmits(['myAdd','myDel'])
    let hander1Click = ()=>{
        $myemit('myAdd','新增的数据')
    }
    let hander2Click = ()=>{
        $myemit('myDel','删除的数据')
    }
</script>

defineExpose获取子组件中的属性值

子组件：

<script setup>
    import { reactive, ref,defineExpose } from "vue";
    let sex=ref('男')
    let info=reactive({
        like:'喜欢李',
        age:27
    })
    // 将组件中的属性暴露出去，这样父组件可以获取
    defineExpose({
        sex,
        info
    })
</script>

父组件：

<template>
  <div class="home">
    <test-com ref="testcomRef"></test-com>
    <button @click="getSonHander">获取子组件中的数据</button>
  </div>
</template>
 
<script setup>
    import TestCom from "../components/TestCom.vue"
    import {ref} from 'vue'
    const testcomRef = ref()
    const getSonHander=()=>{
      console.log('获取子组件中的性别', testcomRef.value.sex );
      console.log('获取子组件中的其他信息', testcomRef.value.info );
    }
</script>

3、await的支持

setup 语法糖中可直接使用 await，不需要写 async ， setup 会自动变成 async setup

代码如下（示例）：

<script setup>
  import Api from '../api/Api'
  const data = await Api.getData()
  console.log(data)
</script>

vue3的setup语法糖＜script setup＞