亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3?props的使用示例詳解

 更新時(shí)間：2023年10月08日 11:52:05   作者：一沓紙稿  
這篇文章主要介紹了Vue3?props的使用詳解,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Props 聲明

1、字符串?dāng)?shù)組聲明props

<script setup lang="ts">
const props = defineProps(["cat"])
console.log(props.cat)
</script>

 2.對(duì)象實(shí)現(xiàn)props

<script setup lang="ts">
const props = defineProps({
    cat:string
})
</script>
//可以在模板中直接使用cat變量
<template>
  {{ cat }}
</template>

你還可以使用類(lèi)型標(biāo)注,這是ts的特性。

<script setup lang="ts">
const props = defineProps<{
    cat?:string
}>()
</script>
//或者使用接口
interface animal{
    cat?:string
}
const props = defineProps<animal>()

3、使用camelCase（小駝峰命名法），可以在模板中直接使用(如第一個(gè)例子)。看代碼

defineProps({
  getSex: String
})
<template>
 {{getSex}}
</template>

4、動(dòng)態(tài)綁定props

import {reactive} from "vue"
const data=reactive({
    article:{
        cat:"tom"
}
})
//下方傳遞這個(gè)cat
<span :animal='data.article.cat'></span>
//然后你就可以改變cat的屬性值就可以實(shí)現(xiàn)動(dòng)態(tài)傳遞數(shù)據(jù)了

注意事項(xiàng)：defineprops在之前的Vue版本中需要引入，但是現(xiàn)在是不需要了。上面幾個(gè)例子是建立在setup語(yǔ)法糖的基礎(chǔ)上編寫(xiě)的即<script setup lang="ts">,如果你不是太熟悉setup語(yǔ)法糖，那么就需要在script標(biāo)簽中使用setup(){}中使用props屬性取得傳遞的數(shù)據(jù)

到此這篇關(guān)于Vue3 props的使用詳解的文章就介紹到這了,更多相關(guān)Vue3 props使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論