Props 聲明
1、字符串?dāng)?shù)組聲明props
<script setup lang="ts">
const props = defineProps(["cat"])
console.log(props.cat)
</script>?2.對象實(shí)現(xiàn)props
<script setup lang="ts">
const props = defineProps({
cat:string
})
</script>
//可以在模板中直接使用cat變量
<template>
{{ cat }}
</template>你還可以使用類型標(biāo)注,這是ts的特性。
<script setup lang="ts">
const props = defineProps<{
cat?:string
}>()
</script>
//或者使用接口
interface animal{
cat?:string
}
const props = defineProps<animal>()3、使用camelCase（小駝峰命名法），可以在模板中直接使用(如第一個(gè)例子)?？创a
defineProps({
getSex: String
})
<template>
{{getSex}}
</template>4、動態(tài)綁定props文章來源：http://www.zghlxwxcb.cn/news/detail-604622.html
import {reactive} from "vue"
const data=reactive({
article:{
cat:"tom"
}
})
//下方傳遞這個(gè)cat
<span :animal='data.article.cat'></span>
//然后你就可以改變cat的屬性值就可以實(shí)現(xiàn)動態(tài)傳遞數(shù)據(jù)了注意事項(xiàng)：defineprops在之前的Vue版本中需要引入，但是現(xiàn)在是不需要了。上面幾個(gè)例子是建立在setup語法糖的基礎(chǔ)上編寫的即<script setup lang="ts">,如果你不是太熟悉setup語法糖，那么就需要在script標(biāo)簽中使用setup(){}中使用props屬性取得傳遞的數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-604622.html
到了這里，關(guān)于Vue3 props的使用詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
