vue3的setup语法糖＜script setup＞

setup语法糖

模板中用到东西无需return

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

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

2、组件不需要在注册

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

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

3、组件数据传递

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

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

defineProps 组件传参

 父组件传参：

子组件接收参数：

defineEmits 组件抛出事件

父组件：

     子组件接收：

defineExpose获取子组件中的属性值

 子组件：

父组件：

3、await的支持

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

代码如下（示例）：