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 &#39;vue&#39;;
		import myComponent from &#39;@/component/myComponent.vue&#39;;
		//此时注册的变量或方法可以直接在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 &#39;vue&#39;;
		import myComponent from &#39;@/components/myComponent.vue&#39;;
		const numb = ref(0);
		let func = ()=>{
			numb.value++;
		}
	</script>

子元件程式碼

	<template>
		<div>{{numb}}</div>
	</template>
	<script lang="ts" setup>
		import {defineProps} from &#39;vue&#39;;
		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 &#39;vue&#39;;
		defineProps({
			numb:{
				type:Number,
				default:NaN
			}
		})
		const emit = defineEmits([&#39;addNumb&#39;]);
		const onClickButton = ()=>{
			//emit(父组件中的自定义方法,参数一,参数二,...)
			emit("addNumb");
		}
	</script>

父元件程式碼

	<template>
		<my-component @addNumb="func" :numb="numb"></my-component>
	</template>
	<script lang="ts" setup>
		import {ref} from &#39;vue&#39;;
		import myComponent from &#39;@/components/myComponent.vue&#39;;
		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 &#39;vue&#39;;
		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 &#39;vue&#39;;
  		import myComp from &#39;@/components/myComponent.vue&#39;;
  		//注册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>

補充：與普通的script一起使用

• 5101c0cdbdc49998c642c71f6b6410a8可以和普通的3f1c4e4b6b16bbbd69b2ee476dc4f83a一起使用。普通的3f1c4e4b6b16bbbd69b2ee476dc4f83a在有這些需要的情況下或許會被使用到。

• 無法在5101c0cdbdc49998c642c71f6b6410a8聲明的選項，例如inheritAttrs或透過外掛啟用的自訂的選

##聲明命名匯出# ###########執行副作用或建立只需要執行一次的物件#########

<script>
    // 普通 <script>, 在模块范围下执行(只执行一次)
    runSideEffectOnce()
    
    // 声明额外的选项
    export default {
      inheritAttrs: false,
      customOptions: {}
    }
</script>

<script setup>
    // 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

以上是vue3 setup語法糖如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！