Vue使用Props實(shí)現(xiàn)組件數(shù)據(jù)交互的示例代碼
props可以是一個(gè)數(shù)組或?qū)ο?，用于指定子組件接受的屬性名稱。通過在父組件中使用子組件時(shí)，通過屬性的方式將數(shù)據(jù)傳遞給子組件，屬性名即為在子組件中聲明的props的屬性名稱。子組件可以在其模板中通過props屬性訪問父組件傳遞的數(shù)據(jù)。props的作用是向子組件傳遞數(shù)據(jù)，允許傳遞任意數(shù)量的prop和任意類型的prop。在Vue 3和TypeScript中，深入了解組件的Props是非常重要的，因?yàn)榭梢栽诮M件的選項(xiàng)中使用props屬性來定義Props的類型和驗(yàn)證規(guī)則。
使用如下：
1、在使用子組件的父組件傳遞數(shù)據(jù)
<RefreshBtn @onFreshEvent="getData" :newsRefresh="newsRefresh"/>
2、子組件數(shù)據(jù)應(yīng)用，使用props確定接收數(shù)據(jù)的類型和默認(rèn)值，在props中還可以進(jìn)行數(shù)據(jù)校驗(yàn)。
<template>
<button @click="refreshHandle">刷新</button>
<p>父頁(yè)面數(shù)據(jù)：{{newsRefresh}}</p>
</template>
<script>
export default {
name: "RefreshBtn",
props: {
newsRefresh: {
type: String,
default: ""
}
},
data() {
return {
target: 1
}
},
methods: {
refreshHandle() {
this.$emit("onFreshEvent",this.target);
this.target += 1;
}
}
}
</script>props完整的校驗(yàn)寫法：
props: {
校驗(yàn)的屬性名: {
type: 類型, // Number String Boolean ...
required: true, // 是否必填
default: 默認(rèn)值, // 默認(rèn)值
validator (value) {
// 自定義校驗(yàn)邏輯
return 是否通過校驗(yàn)
}
}
},<script>
export default {
// 完整寫法（類型、默認(rèn)值、非空、自定義校驗(yàn)）
props: {
w: {
type: Number,
//required: true,
default: 0,
validator(val) {
// console.log(val)
if (val >= 100 || val <= 0) {
console.error('傳入的范圍必須是0-100之間')
return false
} else {
return true
}
},
},
},
}
</script>到此這篇關(guān)于Vue使用Props實(shí)現(xiàn)組件數(shù)據(jù)交互的示例代碼的文章就介紹到這了,更多相關(guān)Vue Props數(shù)據(jù)交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
el-select與el-tree結(jié)合使用實(shí)現(xiàn)樹形結(jié)構(gòu)多選框
我們?cè)趯?shí)際開發(fā)中需要用到下拉樹,elementUI是沒有這個(gè)組件的,我們就要自己去寫了,下面這篇文章主要給大家介紹了關(guān)于el-select與el-tree結(jié)合使用實(shí)現(xiàn)樹形結(jié)構(gòu)多選框的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue響應(yīng)式原理的的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
這篇文章主要介紹了Vue路由 重定向和別名的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了Vue源碼之Watcher的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題
這篇文章主要介紹了elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
開發(fā)vue項(xiàng)目的時(shí)候一般都會(huì)開發(fā)很多自定義的全局組件,下面這篇文章主要給大家總結(jié)介紹了關(guān)于VUE中常用的四種高級(jí)方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問題解決
本文主要介紹了vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue-Router2.X多種路由實(shí)現(xiàn)方式總結(jié)
下面小編就為大家分享一篇Vue-Router2.X多種路由實(shí)現(xiàn)方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能
本次需求是做一個(gè)視頻列表，點(diǎn)擊視頻列表播放對(duì)應(yīng)視頻；同時(shí)要求實(shí)現(xiàn)斷點(diǎn)分段上傳大文件（視頻）的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能，感興趣的朋友一起看看吧2022-12-12
Vue結(jié)合Video.js播放m3u8視頻流的方法示例
本篇文章主要介紹了Vue+Video.js播放m3u8視頻流的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05