vue props數(shù)據(jù)傳遞類型限制方式
更新時(shí)間：2022年10月18日 10:27:52 作者：詞不達(dá)意難知
這篇文章主要介紹了vue props數(shù)據(jù)傳遞類型限制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue props數(shù)據(jù)傳遞類型限制
1.第一種：不限制任何數(shù)據(jù)
props: ['test', 'test1'],?
2.第二種：只限制數(shù)據(jù)類型
props: {
? ? test: String,
? ? test1: Number
? },?3.第三種：限制數(shù)據(jù)類型 必要參 默認(rèn)值
? props: {
? ? test: {
? ? ? type: String, // 字符類型
? ? ? required: true // 必要條件
? ? },
? ? test1: {
? ? ? type: Number, // 字符類型
? ? ? default: 99 // 默認(rèn)值
? ? },
? },Vue中的配置項(xiàng)props
功能：讓組件接收外部傳入的數(shù)據(jù) 向子組件傳遞數(shù)據(jù)
(1).傳遞數(shù)據(jù)（父組件傳遞數(shù)據(jù)）
< Student name="李四" :age="18" sex="女"/>
(2).接收數(shù)據(jù)（子組件接收數(shù)據(jù)）
第一種方式（只接收）
簡(jiǎn)單的聲明接收
props:['name','sex','age']?
第二種方式（限制類型）
接收的同時(shí)對(duì)數(shù)據(jù)進(jìn)行類型限制
?props:{
? ? ? ? ? ?name:String,
? ? ? ? ? ?age:Number,
? ? ? ? ? ?sex:String
? ? ? ? ?}?第三種方式（限制類型、限制必要性、指定默認(rèn)值）
接收數(shù)據(jù)的同時(shí)：進(jìn)行類型數(shù)據(jù)限制+默認(rèn)值+必要性的限制
?? ?props:{
? ? ? ? ? ? ? ? name:{
? ? ? ? ? ? ? ? ? ? type:String, //name的類型是字符串
? ? ? ? ? ? ? ? ? ? required:true //name是必要的
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? age:{
? ? ? ? ? ? ? ? ? ? type:Number,
? ? ? ? ? ? ? ? ? ? default:99 //默認(rèn)值
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? sex:{
? ? ? ? ? ? ? ? ? ? type:String,
? ? ? ? ? ? ? ? ? ? required:true
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }備注：props是只讀的，Vue底層會(huì)檢測(cè)你對(duì)props的修改，如果進(jìn)行了修改。就會(huì)發(fā)出警告，
若業(yè)務(wù)需求確實(shí)需要修改，那么請(qǐng)賦值props的內(nèi)容到data中一份，然后去修改data中的數(shù)據(jù)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例
本篇文章主要介紹了vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
解決vue cli使用typescript后打包巨慢的問(wèn)題
這篇文章主要介紹了解決vue cli使用typescript后打包巨慢的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
一文詳解Vue響應(yīng)式數(shù)據(jù)的原理
在vue2的響應(yīng)式中,存在著添加屬性、刪除屬性、以及通過(guò)下標(biāo)修改數(shù)組,但頁(yè)面不會(huì)自動(dòng)更新的問(wèn)題,而這些問(wèn)題在vue3中都得以解決,本文就給大家詳細(xì)的介紹一下Vue響應(yīng)式數(shù)據(jù)原理,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08
本篇文章主要介紹了VUE使用vuex解決模塊間傳值問(wèn)題 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
這篇文章主要為大家詳細(xì)介紹了Vue computed計(jì)算屬性的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式
這篇文章主要介紹了vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中使用vue-count-to(數(shù)字滾動(dòng)插件)詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于Vue中使用vue-count-to(數(shù)字滾動(dòng)插件)的相關(guān)資料,最近需要開(kāi)發(fā)一個(gè)數(shù)字滾動(dòng)效果,在網(wǎng)上找到一個(gè)關(guān)于vue-countTo的插件,覺(jué)得這個(gè)插件還不錯(cuò),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue中使用setTimeout問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue3 核心特性Suspense 與 Teleport 原理解析
本文詳細(xì)解析了Vue3的核心特性Suspense和Teleport,包括它們的實(shí)現(xiàn)原理、核心源碼、生命周期流程、依賴追蹤機(jī)制等,通過(guò)深入理解這兩個(gè)API的設(shè)計(jì)哲學(xué),開(kāi)發(fā)者可以提升代碼組織能力、優(yōu)化應(yīng)用性能和實(shí)現(xiàn)更優(yōu)雅的架構(gòu)設(shè)計(jì),感興趣的朋友一起看看吧2025-03-03
vue3+Echarts頁(yè)面加載不渲染顯示空白頁(yè)面的解決
這篇文章主要介紹了vue3+Echarts頁(yè)面加載不渲染顯示空白頁(yè)面的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10