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);    let func = ()=>{        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);    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>

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']);    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>

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);    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中立刻应用为undefined    console.log(myComponent.value.numb)  //undefined    const init = ()=>{        console.log(myComponent.value.numb)  //undefined    }    init()    onMounted(()=>{        console.log(myComponent.value.numb)  //0    })</script>