Vue3屬性值傳遞defineProps詳解
更新時(shí)間：2024年09月19日 12:02:10 投稿：mrr
在Vue3中,defineProps()函數(shù)是定義和接收組件屬性的主要方式,通過簡單定義或?qū)ο蠖x,開發(fā)者可以靈活地接收并處理組件上的屬性值,簡單定義方式通過數(shù)組傳遞屬性名,而對(duì)象定義則可以約束屬性的數(shù)據(jù)類型、默認(rèn)值及是否必須傳遞等
在自定義組件時(shí)，通常需要接收組件上的屬性值，在Vue3中可以使用defineProps()函數(shù)來定義接收的屬性值
一、簡單定義
將要接收的屬性值定義在數(shù)組中，傳遞給defineProps函數(shù)即可，函數(shù)的返回值為封裝這些屬性值的一個(gè)對(duì)象
const props = defineProps(['name','age'])
props接收的對(duì)象實(shí)際上長這樣
{
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)值必須通過函數(shù)返回，參數(shù)props中會(huì)接收傳遞來的所有屬性值
default(props) {
return {}
}
},
other: {
type: Object,
// 對(duì)象類型默認(rèn)值要在函數(shù)中返回，參數(shù)props中會(huì)接收傳遞來的所有屬性值
default(props){
return {}
}
}
})到此這篇關(guān)于Vue3屬性值傳遞defineProps的文章就介紹到這了,更多相關(guān)Vue3 defineProps內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3中router路由以及vuex的store使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
在vue3版本中，引入了一個(gè)新的函數(shù)，叫做setup，引入他的原因總結(jié)一下主要原因是：為了使用組合式 API，setup函數(shù)是Composition 的入口。本文將詳細(xì)介紹一下Vue3中setup函數(shù)的使用教程，感興趣的可以了解一下2022-07-07
在vue項(xiàng)目中,和后臺(tái)交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,下面這篇文章主要給大家介紹了關(guān)于Vue3引入axios封裝接口的兩種方法,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Element PageHeader頁頭的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue.js中引入vuex儲(chǔ)存接口數(shù)據(jù)及調(diào)用的詳細(xì)流程
這篇文章主要給大家介紹了關(guān)于在vue.js中引入vuex儲(chǔ)存接口數(shù)據(jù)及調(diào)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
Vue不能watch數(shù)組和對(duì)象變化解決方案
這篇文章主要為大家介紹了Vue不能watch數(shù)組和對(duì)象變化解決方案示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實(shí)例
下面小編就為大家分享一篇vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue element 中的table動(dòng)態(tài)渲染實(shí)現(xiàn)（動(dòng)態(tài)表頭）
這篇文章主要介紹了vue element 中的table動(dòng)態(tài)渲染實(shí)現(xiàn)（動(dòng)態(tài)表頭），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例
今天小編就為大家分享一篇vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用(適合新手)
在Vue項(xiàng)目中導(dǎo)出Excel表格是常見的功能,特別是在后臺(tái)管理系統(tǒng)中,為了方便用戶將大量數(shù)據(jù)保存為本地文件,這篇文章主要給大家介紹了關(guān)于Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用的相關(guān)資料,需要的朋友可以參考下2024-06-06