您好,登錄后才能下訂單哦!
這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)怎么在vue中使用Prop組件傳遞數(shù)據(jù),文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
1、Prop靜態(tài)傳遞數(shù)據(jù)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body > <div id="app"> <!--靜態(tài)傳遞數(shù)據(jù)--> <my-component message="hello" name="劉二狗" age="18"></my-component> </div> </body> <script> Vue.component('my-component',{ //子組件使用父組件的數(shù)據(jù) message name age props:['message','name','age'], //用data選項對數(shù)據(jù)進行處理 data:function(){ return{ message1: this.message +'用data選項對數(shù)據(jù)進行處理' } }, //用計算屬性選項對數(shù)據(jù)進行處理 computed:{ message2:function(){ return this.message + '用計算屬性選項對數(shù)據(jù)進行處理' } }, template:'<div>' + '<span>{{message1}}</span><br>'+ '<span>{{message2}}</span><br>'+ '<span>{{message}} {{name}}今年{{age}}了</span><br>'+ '</div>' }) new Vue({ el:'#app' }) </script> </html>
輸出結(jié)果:
2、Prop動態(tài)傳遞數(shù)據(jù)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body > <div id="app"> <input v-model="parentMsg"><br> <my-component :message="parentMsg"></my-component> </div> </body> <script> Vue.component('my-component',{ props:['message'], data:function(){ return{count:this.message+'劉三狗的嫉妒了'} }, computed:{ normalizedSize: function () { return this.message.trim().toLowerCase() } }, template:'<div>' + '<span>{{message}}---{{normalizedSize}}</span><br>'+ '<span>{{count}}</span>'+ '</div>' }) new Vue({ el:'#app', data:{ parentMsg:'哈哈哈' } }) </script> </html>
輸出結(jié)果:
3、Prop驗證,我們可以為組件的 props 指定驗證規(guī)格。如果傳入的數(shù)據(jù)不符合規(guī)格,Vue 會發(fā)出警告。在前臺的控制器中可以看到警告信息。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="app"> <example :prop-d="message"></example> </div> </body> <script> Vue.component('example', { props: { // 基礎(chǔ)類型檢測 (`null` 意思是任何類型都可以) propA: Number, // 多種類型 propB: [String, Number], // 必傳且是字符串 propC: { type: String, required: true }, // 數(shù)字,有默認值 propD: { type: Number, default: 100 }, // 數(shù)組/對象的默認值應當由一個工廠函數(shù)返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定義驗證函數(shù) propF: { validator: function (value) { return value > 10 } } }, template:'<span>{{propD}}</span>' }) new Vue({ el:'#app', data:{ message:'propD驗證只能傳入數(shù)字類型' } }) </script> </html>
控制臺輸出的警告信息:
上述就是小編為大家分享的怎么在vue中使用Prop組件傳遞數(shù)據(jù)了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。