vue3:setup语法糖

1.setup语法糖简介

直接在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);letfunc=()=>{
            numb.value++;}</script>

2.setup语法糖中新增的api

defineProps：子组件接收父组件中传来的props
defineEmits：子组件调用父组件中的方法
defineExpose：子组件暴露属性，可以在父组件中拿到

2.1defineProps

父组件代码

<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);letfunc=()=>{
            numb.value++;}</script>

子组件代码

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

2.2defineEmits

子组件代码

<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']);constonClickButton=()=>{//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);letfunc=()=>{
            numb.value++;}</script>

2.3defineExpose

子组件代码

<template><div>子组件中的值{{numb}}</div><button @click="onClickButton">数值加1</button></template><script lang="ts" setup>import{ref,defineExpose}from'vue';let numb =ref(0);functiononClickButton(){
            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();functiononClickButton(){//在组件的value属性中获取暴露的值
            console.log(myComponent.value.numb)//0}//注意：在生命周期中使用或事件中使用都可以获取到值，//但在setup中立即使用为undefined
        console.log(myComponent.value.numb)//undefinedconstinit=()=>{
            console.log(myComponent.value.numb)//undefined}init()onMounted(()=>{
            console.log(myComponent.value.numb)//0})</script>