Vue使用Props實(shí)現(xiàn)組件數(shù)據(jù)交互的示例代碼
props可以是一個(gè)數(shù)組或?qū)ο?，用于指定子組件接受的屬性名稱。通過(guò)在父組件中使用子組件時(shí)，通過(guò)屬性的方式將數(shù)據(jù)傳遞給子組件，屬性名即為在子組件中聲明的props的屬性名稱。子組件可以在其模板中通過(guò)props屬性訪問(wèn)父組件傳遞的數(shù)據(jù)。props的作用是向子組件傳遞數(shù)據(jù)，允許傳遞任意數(shù)量的prop和任意類型的prop。在Vue 3和TypeScript中，深入了解組件的Props是非常重要的，因?yàn)榭梢栽诮M件的選項(xiàng)中使用props屬性來(lái)定義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 是否通過(guò)校驗(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)文章
本文主要介紹了如何在vue中使用jsx語(yǔ)法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
調(diào)度器是vue3響應(yīng)式系統(tǒng)中一個(gè)非常重要的特性，可調(diào)度性指的是當(dāng)trigger 動(dòng)作觸發(fā)副作用函數(shù)重新執(zhí)行時(shí)，有能力決定副作用函數(shù)執(zhí)行的時(shí)機(jī)、次數(shù)以及方式，本文通過(guò)代碼示例給大家介紹調(diào)度器是什么，有什么功能，怎么使用,感興趣的同學(xué)可以借鑒閱讀2023-06-06
Vue基礎(chǔ)popover彈出框編寫及bug問(wèn)題分析
這篇文章主要為大家介紹了Vue基礎(chǔ)popover彈出框編寫及bug問(wèn)題分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式
這篇文章主要介紹了vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue實(shí)現(xiàn)GitHub的第三方授權(quán)方法示例
本文主要介紹了vue實(shí)現(xiàn)GitHub的第三方授權(quán)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vue精美簡(jiǎn)潔登錄頁(yè)完整代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue精美簡(jiǎn)潔登錄頁(yè)完整代碼的相關(guān)資料,通過(guò)文中的方法大家可以使用實(shí)現(xiàn)簡(jiǎn)單的用戶登錄界面,下面通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
VUE 實(shí)現(xiàn)element upload上傳圖片到阿里云
這篇文章主要介紹了VUE 實(shí)現(xiàn)element upload上傳圖片到阿里云，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue實(shí)現(xiàn)父子組件之間的通信以及兄弟組件的通信功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)父子組件之間的通信以及兄弟組件的通信功能,結(jié)合實(shí)例形式分析了vue.js組件間通信相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
解決vue請(qǐng)求接口第一次成功,第二次失敗問(wèn)題
這篇文章主要介紹了解決vue請(qǐng)求接口第一次成功,第二次失敗問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理源碼學(xué)習(xí)
這篇文章主要為大家介紹了Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理源碼學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09