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

父组件代码

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

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

父组件代码

	<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