Vue中props的使用詳解
更新時間：2018年06月15日 16:53:11 作者：南北北南
props屬性是父子組件之間的通信橋梁。這篇文章主要介紹了Vue中props的使用,需要的朋友可以參考下
props屬性是父子組件之間的通信橋梁。何為父子組件？從子組件的觀點來看，他的上一級實例或組件即為他的父組件。我們知道，處于安全考慮，組件模板里我們無法直接使用父組件的data數(shù)據(jù)，使用props這個屬性可以將父組件的數(shù)據(jù)傳給子組件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props的測試</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
<Child message="父組件的message,我把他的內(nèi)容重新定義了，但是父組件不會發(fā)生改變哦，因為沒有綁定，哈哈?。?></Child>
<hr />
<input v-model="message"/>
<Child :message='message'></Child>
</div>
<script>
Vue.component('Child',{
props: ['message'],
template: '<span>{{ message }}</span>'
});
var vm = new Vue({
el: '#props',
data: {
message: 'prop的測試'
}
});
</script>
</body>
</html>
代碼效果圖
在子組件中對父組件的數(shù)據(jù)進行處理。父組件的數(shù)據(jù)通過props傳入子組件以后，在子組件中也可對數(shù)據(jù)進行相關(guān)處理，包括計算屬性、data屬性等。這樣當子組件需要對數(shù)據(jù)進行處理時，避免了直接在父組件中對數(shù)據(jù)進行操作，而且由于props數(shù)據(jù)流單向性，在子組件中更改數(shù)據(jù)時，不會對父組件的數(shù)據(jù)產(chǎn)生影響。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props的測試</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
<input v-model="message"/>
<Child :message='message'></Child>
</div>
<script>
Vue.component('Child',{
props: ['message','todos'],
template: '<span>{{ test }}</span>',
computed: {
test: function(){
return this.message.trim().toUpperCase();
}}
});
var vm = new Vue({
el: '#props',
data: {
message: 'prop的測試'
}
});
</script>
</body>
</html>
代碼效果圖
代碼效果圖
prop的驗證
我們可以為組件的 prop 指定驗證規(guī)則。如果傳入的數(shù)據(jù)不符合要求，Vue 會發(fā)出警告。這對于開發(fā)給他人使用的組件非常有用。
要指定驗證規(guī)則，需要用對象的形式來定義 prop，而不能用字符串數(shù)組
Vue.component('example',{
props: {
propA: String,
propB: [Number,String]
}
});
總結(jié)
以上所述是小編給大家介紹的Vue中props的使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了Vue之mixin全局的用法詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
最近遇見一個需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關(guān)于前端大文件上傳與下載(分片上傳)的詳細過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
Vue.js 2.0 移動端拍照壓縮圖片預(yù)覽及上傳實例
這篇文章主要介紹了Vue.js 2.0 移動端拍照壓縮圖片預(yù)覽及上傳實例，本來移動端開發(fā)H5應(yīng)用，準備將mui框架和Vue.js+vue-router+vuex 全家桶結(jié)合起來使用2017-04-04
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定的原理以及知識點總結(jié)，并做了代碼實例分析，有需要的朋友參考下。2018-04-04
本篇文章主要介紹了Vue實現(xiàn)路由跳轉(zhuǎn)和嵌套，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue作用域插槽實現(xiàn)方法及作用詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
vue與vue-i18n結(jié)合實現(xiàn)后臺數(shù)據(jù)的多語言切換方法
下面小編就為大家分享一篇vue與vue-i18n結(jié)合實現(xiàn)后臺數(shù)據(jù)的多語言切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue實現(xiàn)瀏覽器全屏展示功能,項目中使用的是sreenfull插件，執(zhí)行命令安裝，具體實現(xiàn)代碼跟隨小編一起看看吧2019-11-11