vue3:setup語法糖使用教程

Posted on by

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>

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

<script setup>可以和普通的<script>一起使用。普通的<script>在有這些需要的情況下或許會被使用到。

  • 無法在<script setup>聲明的選項，例如inheritAttrs或通過插件啟用的自定義的選
  • 聲明命名導出
  • 運行副作用或者創建隻需要執行一次的對象
<script>
    // 普通 <script>, 在模塊范圍下執行(隻執行一次)
    runSideEffectOnce()
    
    // 聲明額外的選項
    export default {
      inheritAttrs: false,
      customOptions: {}
    }
</script>

<script setup>
    // 在 setup() 作用域中執行 (對每個實例皆如此)
</script>

總結

到此這篇關於vue3:setup語法糖使用的文章就介紹到這瞭,更多相關vue3:setup語法糖內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：