vue3:setup語(yǔ)法糖使用教程
1.setup語(yǔ)法糖簡(jiǎn)介
直接在script標(biāo)簽中添加setup屬性就可以直接使用setup語(yǔ)法糖了。
使用setup語(yǔ)法糖后,不用寫setup函數(shù);組件只需要引入不需要注冊(cè);屬性和方法也不需要再返回,可以直接在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'; //此時(shí)注冊(cè)的變量或方法可以直接在template中使用而不需要導(dǎo)出 const numb = ref(0); let func = ()=>{ numb.value++; } </script>
2.setup語(yǔ)法糖中新增的api
- defineProps:子組件接收父組件中傳來(lái)的props
- defineEmits:子組件調(diào)用父組件中的方法
- 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">數(shù)值加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(父組件中的自定義方法,參數(shù)一,參數(shù)二,...) 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">數(shù)值加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'; //注冊(cè)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>
補(bǔ)充:與普通的script一起使用
<script setup>可以和普通的<script>一起使用。普通的<script>在有這些需要的情況下或許會(huì)被使用到。
- 無(wú)法在<script setup>聲明的選項(xiàng),例如inheritAttrs或通過(guò)插件啟用的自定義的選
- 聲明命名導(dǎo)出
- 運(yùn)行副作用或者創(chuàng)建只需要執(zhí)行一次的對(duì)象
<script> ? ? // 普通 <script>, 在模塊范圍下執(zhí)行(只執(zhí)行一次) ? ? runSideEffectOnce() ? ?? ? ? // 聲明額外的選項(xiàng) ? ? export default { ? ? ? inheritAttrs: false, ? ? ? customOptions: {} ? ? } </script> <script setup> ? ? // 在 setup() 作用域中執(zhí)行 (對(duì)每個(gè)實(shí)例皆如此) </script>
總結(jié)
到此這篇關(guān)于vue3:setup語(yǔ)法糖使用的文章就介紹到這了,更多相關(guān)vue3:setup語(yǔ)法糖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06使用vue項(xiàng)目配置多個(gè)代理的注意點(diǎn)
這篇文章主要介紹了使用vue項(xiàng)目配置多個(gè)代理的注意點(diǎn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07vue項(xiàng)目多租戶環(huán)境變量的設(shè)置
本文主要介紹了vue項(xiàng)目多租戶環(huán)境變量的設(shè)置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04vue 進(jìn)階之實(shí)現(xiàn)父子組件間的傳值
這篇文章主要介紹了vue 進(jìn)階之實(shí)現(xiàn)父子組件間的傳值,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04vue+vux?vux安裝出現(xiàn)錯(cuò)誤問題及解決
這篇文章主要介紹了vue+vux?vux安裝出現(xiàn)錯(cuò)誤問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08