Vue3?props的使用示例詳解
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>你還可以使用類型標(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、動(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ǔ)上編寫的即<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)文章
今天小編就為大家分享一篇關(guān)于Vuex中的State使用介紹，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
本文介紹了雙Token機(jī)制在Vue3應(yīng)用中的實(shí)現(xiàn),包括登錄/注冊(cè)、請(qǐng)求攔截、響應(yīng)攔截、Token存儲(chǔ)、退出登錄等流程,重點(diǎn)是Token的刷新邏輯和安全性2025-03-03
這篇文章主要為大家詳細(xì)介紹了Vue組件開發(fā)之異步組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue enter回車導(dǎo)致頁(yè)面刷新問題及解決
這篇文章主要介紹了Vue enter回車導(dǎo)致頁(yè)面刷新問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法示例【基于vm.$watch】
這篇文章主要介紹了vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法,結(jié)合實(shí)例形式分析了vue.js基于vm.$watch進(jìn)行事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue中axios防止多次觸發(fā)終止多次請(qǐng)求的示例代碼（防抖）
這篇文章主要介紹了vue中axios防止多次觸發(fā)終止多次請(qǐng)求的實(shí)現(xiàn)方法（防抖）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
Vue.js bootstrap前端實(shí)現(xiàn)分頁(yè)和排序
這篇文章主要為大家詳細(xì)介紹了Vue.js結(jié)合bootstrap前端實(shí)現(xiàn)分頁(yè)和排序效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue3 onMounted異步函數(shù)同步請(qǐng)求async/await實(shí)現(xiàn)
這篇文章主要為大家介紹了vue3 onMounted初始化數(shù)據(jù)異步函數(shù)/同步請(qǐng)求async/await實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue應(yīng)用qs插件實(shí)現(xiàn)參數(shù)格式化示例詳解
這篇文章主要為大家介紹了Vue應(yīng)用qs插件實(shí)現(xiàn)參數(shù)格式化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
結(jié)合el-upload組件實(shí)現(xiàn)大文件分片上傳功能
Element UI的el-upload上傳組件相信各位小伙伴都已經(jīng)非常熟悉，最近接了一個(gè)新需求，要求在el-upload組件基礎(chǔ)上實(shí)現(xiàn)分片上傳功能，即小于等于5M文件正常上傳，大于5M文件切成5M每片上傳,那么這個(gè)功能怎么實(shí)現(xiàn)呢?一起看看吧2022-09-09