广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

直接在script标签中添加setup属性就可以直接使用setup语法糖了。

使用setup语法糖后，不用写setup函数；组件只需要引入不需要注册；属性和方法也不需要再返回，可以直接在template模板中使用。

<template><my-component @click="func" :numb="numb"></my-component></template><script lang="ts" setup>import {ref} from 'vue';import myComponent from '@/component/myComponent.vue';//此时注册的变量或方法可以直接在template中使用而不需要导出const numb = ref(0);let func = ()=>{numb.value++;}</script>

defineProps：子组件接收父组件中传来的props

defineEmits：子组件调用父组件中的方法

defineExpose：子组件暴露属性，可以在父组件中拿到

父组件代码

<template><my-component @click="func" :numb="numb"></my-component></template><script lang="ts" setup>import {ref} from 'vue';import myComponent from '@/components/myComponent.vue';const numb = ref(0);let func = ()=>{numb.value++;}</script>

子组件代码

<template><div>{{numb}}</div></template><script lang="ts" setup>import {defineProps} from 'vue';defineProps({numb:{type:Number,default:NaN}})</script>

子组件代码

<template><div>{{numb}}</div><button @click="onClickButton">数值加1</button></template><script lang="ts" setup>import {defineProps,defineEmits} from 'vue';defineProps({numb:{type:Number,default:NaN}})const emit = defineEmits(['addNumb']);const onClickButton = ()=>{//emit(父组件中的自定义方法,参数一,参数二,...)emit("addNumb");}</script>

父组件代码

<template><my-component @addNumb="func" :numb="numb"></my-component></template><script lang="ts" setup>import {ref} from 'vue';import myComponent from '@/components/myComponent.vue';const numb = ref(0);let func = ()=>{numb.value++;}</script>

子组件代码

<template><div>子组件中的值{{numb}}</div><button @click="onClickButton">数值加1</button></template><script lang="ts" setup>import {ref,defineExpose} from 'vue';let numb = ref(0);function onClickButton(){numb.value++;}//暴露出子组件中的属性defineExpose({numb })</script>

父组件代码

<template><my-comp ref="myComponent"></my-comp><button @click="onClickButton">获取子组件中暴露的值</button></template><script lang="ts" setup>import {ref} from 'vue';import myComp from '@/components/myComponent.vue';//注册ref，获取组件const myComponent = ref();function onClickButton(){//在组件的value属性中获取暴露的值console.log(myComponent.value.numb)  //0}//注意：在生命周期中使用或事件中使用都可以获取到值，//但在setup中立即使用为undefinedconsole.log(myComponent.value.numb)  //undefinedconst init = ()=>{console.log(myComponent.value.numb)  //undefined}init()onMounted(()=>{console.log(myComponent.value.numb)  //0})</script>

<script setup>可以和普通的<script>一起使用。普通的<script>在有这些需要的情况下或许会被使用到。

无法在<script setup>声明的选项，例如inheritAttrs或通过插件启用的自定义的选

声明命名导出

运行副作用或者创建只需要执行一次的对象

<script>    // 普通 <script>, 在模块范围下执行(只执行一次)    runSideEffectOnce()        // 声明额外的选项    export default {      inheritAttrs: false,      customOptions: {}    }</script><script setup>    // 在 setup() 作用域中执行 (对每个实例皆如此)</script>

以上就是vue3 setup语法糖如何使用的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~