vue3 setup语法糖

目录：

1. setup语法糖简介
2. setup语法糖中新增的api
   2-1.defineProps
   2-2.defineEmits
   2-3.defineExpose

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>
1
2
3
4
5
6
7
8
9
10
11
12

2. setup语法糖中新增的api

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

2-1. defineProps

父组件代码

<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>
1
2
3
4
5
6
7
8
9
10
11

子组件代码

<template>
		<div>{{numb}}</div>
</template>
<script lang="ts" setup>
	import {defineProps} from 'vue';
	defineProps({
		numb:{
			type:Number,
			default:NaN
		}
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12

2-2. defineEmits

子组件代码

<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"]);
	cosnt onClickButton = () => {
		emit("addNumb");
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

父组件代码

<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 >
1
2
3
4
5
6
7
8
9
10
11

2-3. defineExpose

子组件代码

<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 >
1
2
3
4
5
6
7
8
9
10
11
12
13
14

父组件代码

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25