VueJs組件prop驗(yàn)證簡(jiǎn)單介紹
組件
Vue.js引入的組件，讓分解單一HTML到獨(dú)立組件成為可能。組件可以自定義元素形式使用，或者使用原生元素但是以is特性做擴(kuò)展。
今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時(shí)候?qū)魅氲闹底雠袛啵瑢?xiě)了個(gè)小例子。
<div id="app">
<my-child
:num="100"
:msg="'sdf'"
:object="{a:'a'}"
:cust="100"
></child>
</div>
<script type="text/javascript">
Vue.component('my-child', {
props: {
// 基礎(chǔ)類型檢測(cè) (`null` 意思是任何類型都可以)
num: Number,
// 多種類型
propB: [String, Number],
// 必傳且是字符串
msg: {
type: String,
required: true
},
// 數(shù)字，有默認(rèn)值
num1: {
type: Number,
default: 1000
},
// 數(shù)組/對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
object: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定義驗(yàn)證函數(shù)
cust: {
validator: function (value) {
return value > 10
}
}
},
template: `<div>
<p>{{ num }}</p>
<p>{{ msg }}</p>
<p>{{ num1 }}</p>
<p>{{ object }}</p>
<p>{{ cust }}</p>
</div>`
})
new Vue({
el: "#app"
});
</script>
輸出結(jié)果
這里都是通過(guò)驗(yàn)證了的，能夠全部輸出來(lái)，而且控制臺(tái)沒(méi)有報(bào)錯(cuò)。
如果有不符合的，控制臺(tái)會(huì)報(bào)錯(cuò)。
<div id="app">
<my-child
:num="asd"
:msg="sdf"
:object="{a:'a'}"
:cust="100"
></child>
</div>
對(duì)應(yīng)的，也沒(méi)有渲染出來(lái)
但是也有一些是報(bào)錯(cuò)了但是渲染出來(lái)的。比如
<div id="app">
<my-child
:num="100"
:msg="'sdf'"
:object="{a:'a'}"
:cust="1"
></child>
</div>
所以，這個(gè)驗(yàn)證功能多的還是用作于開(kāi)發(fā)，或者說(shuō)寫(xiě)的組件讓別的開(kāi)發(fā)者使用是做的認(rèn)證。（完全初學(xué)不太懂，如果有什么寫(xiě)錯(cuò)或者說(shuō)這個(gè)驗(yàn)證還有什么功能，請(qǐng)?jiān)谠u(píng)論寫(xiě)下，先謝謝你了）
總結(jié)
以上所述是小編給大家介紹的VueJs組件prop驗(yàn)證簡(jiǎn)單理解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue3在新版本中提供了一個(gè)新的API，稱為Suspense，它可以使異步組件的加載更加高效和流暢，在本文中，我們將詳細(xì)了解 Vue3 Suspense 處理異步組件加載的工作原理以及如何使用它來(lái)提高 Web 應(yīng)用程序的性能2023-06-06
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
electron-vue中報(bào)錯(cuò)Cannot?use?import?statement?outside?a?m
Electron 是一個(gè)使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架,下面這篇文章主要給大家介紹了關(guān)于electron-vue中報(bào)錯(cuò)Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下2023-02-02
Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的示例代碼
這篇文章主要介紹了Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的方法,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue更新數(shù)據(jù)卻不渲染頁(yè)面的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
mapActions 就是將組件中的函數(shù)映射為對(duì)應(yīng)的action，通過(guò)本文我們了解了mapActions 大概是用來(lái)干什么的，接下來(lái)介紹一下 mapActions 的具體用法，感興趣的朋友一起看看吧2023-09-09
淺析webpack-bundle-analyzer在vue-cli3中的使用
這篇文章主要介紹了webpack-bundle-analyzer在vue-cli3中的使用,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
本篇文章主要介紹了vue axios 二次封裝的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
在Vue模板中啟用這些表現(xiàn)力庫(kù)插件的最簡(jiǎn)單方法是在初始化項(xiàng)目時(shí)安裝它們,或使用 npm install（或 yarn add）安裝包,這篇文章主要介紹了Vue3中如何使用SCSS編寫(xiě)樣式,需要的朋友可以參考下2023-12-12
vue3使用quill富文本編輯器保姆級(jí)教程(附踩坑解決)
這篇文章主要給大家介紹了關(guān)于vue3使用quill富文本編輯器保姆級(jí)教程的相關(guān)資料,在許多網(wǎng)站和應(yīng)用程序中富文本編輯器是一種常見(jiàn)的工具,它使用戶能夠以直觀的方式創(chuàng)建和編輯文本內(nèi)容,需要的朋友可以參考下2023-11-11