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

文章转载自：https://blog.csdn.net/weixin_44439874/article/details/122126954