快捷導(dǎo)航

Vue3?props的使用示例詳解

更新時間：2023年10月08日 11:52:05 作者：一沓紙稿

這篇文章主要介紹了Vue3?props的使用詳解,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

Props 聲明

1、字符串數(shù)組聲明props

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

2.對象實現(xiàn)props

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

你還可以使用類型標注,這是ts的特性。

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

3、使用camelCase（小駝峰命名法），可以在模板中直接使用(如第一個例子)?？创a

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

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