vue3 setup语法糖

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

今天记录学习 vue3 setup语法糖及新增的3个api。

1. 什么是setup语法糖

Vue3官方提供了 script setup 语法糖。

只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用return返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。

一般用法：

<script setup>
let count = $ref(0)

console.log(count)

function increment() {
  count++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

2. setup语法糖中的defineProps：子组件接收父组件中传来的props

父组件：

	<template>
		<child-component @click="add" :num="num"></child-component>
	</template>
	<script lang="ts" setup>
		import {ref} from 'vue';
		import childComponent from '@/components/childComponent.vue';
		const num = ref(0);
		const add = ()=>{
                     num.value+=1;
		}
	</script>

子组件 childComponent.vue：

	<template>
		<div>{{props.num}}</div>
	</template>
	<script lang="ts" setup>
        import {defineProps} from 'vue';
        const props = defineProps({
            num:{
                type: Number,  // 这里是Number不是number
                default:0
            }
        })
	</script>

4. setup语法糖中的defineEmits：子组件调用父组件中的方法

子组件：

<template>
        <div>{{num}}</div>
        <button @click="handleClick">num+1</button>
</template>
<script lang="ts" setup>
        import {defineProps, defineEmits} from 'vue';
        defineProps({
            num:{
                type:Number,
                default:0
            }
        })
        const emit = defineEmits(['addNum']);
        const handleClick = ()=>{
            emit("addNum");
        }
</script>

父组件：

<template>
        <child-component @add-num="add" :num="num"></child-component>
</template>
<script lang="ts" setup>
    import {ref} from 'vue';
    import childComponent from '@/components/childComponent.vue';
    const numb = ref(0);
    const add = ()=>{
        num.value+=1;
    }
</script>

6. setup语法糖中的defineExpose：子组件暴露属性，可以在父组件中拿到

子组件：

<template>
        <div>子组件--{{num}}</div>
        <button @click="handleClick">num+1</button>
</template>
<script lang="ts" setup>
    import {ref,defineExpose} from 'vue';
    const num = ref(0);
    const handleClick = () => {
            num.value++;	
    }
    //暴露出子组件中的属性
    defineExpose({
            num
    })
</script>

父组件：

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

希望本文对您有所帮助。