1.setup语法糖简介

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

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

2.setup语法糖中新增的api

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

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

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

2.1 defineProps （ 父传子 ）

父组件代码

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

子组件代码

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

2.2 defineEmits（ 子传父 ）

子组件代码

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

父组件代码

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

2.3 defineExpose （ 父获取子属性 ）

子组件代码

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

父组件代码

<template>
    <myComponent ref="myComponent"></myComponent>
    <button @click="onClickButton">获取子组件中暴露的值</button>
</template>
<script lang="ts" setup>
    import {ref} from 'vue';
    import myComponent from '@/components/myComponent.vue';
    // 获取 myComponent 组件 DOM对象，myComponent 和 ref属性的值保持一致
    const myComponent = ref<null | HTMLElement>();
    const onClickButton = () => {
        // 获取子组件暴露的属性
        console.log(myComponent.value.numb)  // 0
    }
    // 注意：在生命周期中使用或事件中使用都可以获取到值，
    // 但在setup中立即使用为undefined，因为setup 类似于vue2的 created 生命周期
    console.log(myComponent.value.numb)  // undefined
    const init = ()=>{
        console.log(myComponent.value.numb)  // undefined
    }
    init()
    // vue3 onMounted 等价于 vue2 mounted
    onMounted(()=>{
        console.log(myComponent.value.numb)  //0
    })
</script>