vue3 steup语法糖

Vue3中的setup语法糖是一种简化组件编写的方式，它可以让我们在组件中直接使用Composition API的功能，而无需编写setup函数。通过在script标签中添加setup属性，我们可以直接在其中编写代码，而不需要注册属性和方法，也不需要再返回。这样，我们可以在template模板中直接使用这些属性和方法。

在使用setup语法糖后，我们可以使用一些新增的API来更方便地编写组件。其中，defineProps用于子组件接收父组件传递的props，defineEmits用于子组件调用父组件的方法，defineExpose用于子组件暴露属性，可以让父组件访问到这些属性。

举个例子，如果我们在父组件中传递一个名为numb的prop给子组件，我们可以在子组件中使用defineProps来接收这个prop，并在template中直接使用它。

<template>
  <my-component @click="func" :numb="numb"></my-component>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import myComponent from '@/components/myComponent.vue';

// 使用defineProps接收父组件传递的props
const props = defineProps({
  numb: Number
});

// 在template中直接使用props.numb
let func = () => {
  console.log(props.numb);
}
</script>

这样，我们就可以更方便地使用Vue3中的setup语法糖来编写组件了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [使用SpringBoot2和Vue3 Setup语法糖、 Composition Api开发的简洁、易用的低代码中后台解决方案](https://download.csdn.net/download/qq_41701956/87745390)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3:setup语法糖](https://blog.csdn.net/seimeii/article/details/126101422)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]