vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例

2019-11-19 15:46:00

字體：大中小

供稿：網(wǎng)友

組件實(shí)例的作用域是孤立的。這意味著不能(也不應(yīng)該)在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過子組件的props選項(xiàng)。

prop 是單向綁定的：當(dāng)父組件的屬性變化時，將傳導(dǎo)給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態(tài)。

每次父組件更新時，子組件的所有 prop 都會更新為最新值。這意味著你不應(yīng)該在子組件內(nèi)部改變 prop。

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選項(xiàng)對數(shù)據(jù)進(jìn)行處理    data:function(){     return{       message1: this.message +'用data選項(xiàng)對數(shù)據(jù)進(jìn)行處理'     }    },    //用計(jì)算屬性選項(xiàng)對數(shù)據(jù)進(jìn)行處理    computed:{      message2:function(){        return this.message + '用計(jì)算屬性選項(xiàng)對數(shù)據(jù)進(jìn)行處理'      }    },    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驗(yàn)證，我們可以為組件的 props 指定驗(yàn)證規(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ù)字，有默認(rèn)值      propD: {        type: Number,        default: 100      },      // 數(shù)組／對象的默認(rèn)值應(yīng)當(dāng)由一個工廠函數(shù)返回      propE: {        type: Object,        default: function () {          return { message: 'hello' }        }      },      // 自定義驗(yàn)證函數(shù)      propF: {        validator: function (value) {          return value > 10        }      }    },    template:'<span>{{propD}}</span>'  })  new Vue({    el:'#app',    data:{      message:'propD驗(yàn)證只能傳入數(shù)字類型'    }  })</script></html>

控制臺輸出的警告信息：