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>

	</template>

	<script lang="ts" setup>

		import {defineProps} from 'vue';

		defineProps({

			numb:{

				type:Number,

				default:NaN

			}

		})

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