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