Vue3?props的使用示例詳解
更新時(shí)間：2023年10月08日 11:52:05 作者：一沓紙稿
這篇文章主要介紹了Vue3?props的使用詳解,本文通過示例代碼給大家介紹的非常詳細(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>你還可以使用類型標(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)文章
createPersistedState是Pinia插件,用于持久化存儲(chǔ)狀態(tài)數(shù)據(jù),通過localStorage/sessionStorage實(shí)現(xiàn)頁(yè)面刷新后數(shù)據(jù)保留,適用于登錄信息、主題設(shè)置等場(chǎng)景,需在main.ts注冊(cè)并配置store開啟2025-07-07
同時(shí)Vue也支持讓開發(fā)者,自己注冊(cè)一些指令,這些指令被稱為自定義指令,每個(gè)指令都有自己各自獨(dú)立的功能,這篇文章主要介紹了Vue自定義指令簡(jiǎn)介和基本使用,需要的朋友可以參考2024-03-03
這篇文章主要介紹了Vue實(shí)現(xiàn)微信支付功能遇到的坑,本文是小編記錄整理下拉的，以便日后所需，需要的朋友可以參考下2019-06-06
vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開功能的實(shí)現(xiàn)
這篇文章主要介紹了vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開功能的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
Vue使用konva實(shí)現(xiàn)一個(gè)簡(jiǎn)便的流程圖
日常開發(fā)中我們可能碰到流程圖的需求,實(shí)現(xiàn)流程圖的庫(kù)有很多,如果我們想要實(shí)現(xiàn)一個(gè)簡(jiǎn)便的流程圖可以使用konva庫(kù)來實(shí)現(xiàn),下面我們就來看一下具體的實(shí)現(xiàn)過程,需要的朋友可以參考下2023-08-08
在我們用vue時(shí),我們經(jīng)常用到一個(gè)方法是this.$nextTick,相信你也用過,我常用的場(chǎng)景是在進(jìn)行獲取數(shù)據(jù)后,需要對(duì)新視圖進(jìn)行下一步操作或者其他操作時(shí),發(fā)現(xiàn)獲取不到dom,這篇文章主要給大家介紹了關(guān)于$nextTick的相關(guān)資料,需要的朋友可以參考下2021-07-07
vue2實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求顯示loading圖
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求顯示loading圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
vue項(xiàng)目中使用ueditor的實(shí)例講解
下面小編就為大家分享一篇vue項(xiàng)目中使用ueditor的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點(diǎn)及其與目標(biāo)或理想值的關(guān)系的圖表類型,它在顯示進(jìn)度、完成率或其他類似度量時(shí)非常有用,本文給大家介紹了使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下2024-06-06