快捷導(dǎo)航

Vue3屬性值傳遞defineProps詳解

更新時(shí)間：2024年09月19日 12:02:10 投稿：mrr

在Vue3中,defineProps()函數(shù)是定義和接收組件屬性的主要方式,通過(guò)簡(jiǎn)單定義或?qū)ο蠖x,開(kāi)發(fā)者可以靈活地接收并處理組件上的屬性值,簡(jiǎn)單定義方式通過(guò)數(shù)組傳遞屬性名,而對(duì)象定義則可以約束屬性的數(shù)據(jù)類型、默認(rèn)值及是否必須傳遞等

一、簡(jiǎn)單定義

將要接收的屬性值定義在數(shù)組中，傳遞給defineProps函數(shù)即可，函數(shù)的返回值為封裝這些屬性值的一個(gè)對(duì)象

const props = defineProps(['name','age'])

props接收的對(duì)象實(shí)際上長(zhǎng)這樣

{
    name: '屬性值',
    age: '屬性值'
}

二、對(duì)象定義

① 只約束屬性的數(shù)據(jù)類型

約束一種數(shù)據(jù)類型直接寫，約束多種數(shù)據(jù)類型用數(shù)組包裹

const props = defineProps({
        name: String,               //  必須是String
        info: [String, Object],     //  類型可以是String或Object
 })

② 約束更多信息

type：屬性的數(shù)據(jù)類型，可以用數(shù)組指定多個(gè)
default：屬性的默認(rèn)值，數(shù)組或?qū)ο箢愋湍J(rèn)值要從函數(shù)中返回
required：設(shè)置屬性值是否必須傳遞（true為必須傳遞，false為非必須）

const props = defineProps({
        name: {
            type: String,
            default: '匿名',  
        },
        info: {
            type: String,
            required: true,
        },
        friends: {
            type: Array,
            //  數(shù)組類型默認(rèn)值必須通過(guò)函數(shù)返回，參數(shù)props中會(huì)接收傳遞來(lái)的所有屬性值
            default(props) {
                return {}
            }
        },
        other: {
            type: Object,   
            //  對(duì)象類型默認(rèn)值要在函數(shù)中返回，參數(shù)props中會(huì)接收傳遞來(lái)的所有屬性值
            default(props){
                return {}
            }
        }
    })

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

您可能感興趣的文章:

相關(guān)文章

Vue加載json文件的方法簡(jiǎn)單示例
這篇文章主要介紹了Vue加載json文件的方法,結(jié)合實(shí)例形式分析了vue.js針對(duì)json文件的加載及數(shù)據(jù)讀取等相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
Vue3中watch的最佳用法
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法的相關(guān)資料,文章中有詳細(xì)的代碼示例,需要的朋友可以參考下
2023-04-04
vue+echarts5實(shí)現(xiàn)中國(guó)地圖的示例代碼
本文主要介紹了vue+echarts5實(shí)現(xiàn)中國(guó)地圖的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
vue實(shí)現(xiàn)拖拽窗口功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽窗口功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue-element-admin項(xiàng)目導(dǎo)入和導(dǎo)出的實(shí)現(xiàn)
組件是Vue.js最強(qiáng)大的功能，這篇文章主要介紹了vue-element-admin項(xiàng)目導(dǎo)入和導(dǎo)出的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
vue3中給數(shù)組賦值丟失響應(yīng)式的解決
這篇文章主要介紹了vue3中給數(shù)組賦值丟失響應(yīng)式的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue搭建簡(jiǎn)易前端的思路及問(wèn)題詳解
這篇文章主要介紹了如何使用Vue和ElementPlus構(gòu)建前端頁(yè)面,特別是如何進(jìn)行跨域請(qǐng)求和使用Vue?Router進(jìn)行路由管理,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
vue+jsplumb實(shí)現(xiàn)工作流程圖的項(xiàng)目實(shí)踐
本文主要介紹了vue+jsplumb實(shí)現(xiàn)工作流程圖的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
Vue項(xiàng)目環(huán)境搭建詳細(xì)總結(jié)
這篇文章主要為大家介紹了Vue項(xiàng)目環(huán)境搭建總結(jié)篇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
詳解一次Vue低版本安卓白屏問(wèn)題的解決過(guò)程
這篇文章主要介紹了詳解一次Vue低版本安卓白屏問(wèn)題的解決過(guò)程,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05