VueJS組件之間通過props交互及驗證的方式

2019-11-19 15:34:11

字體：大中小

來源：轉載

供稿：網友

props 是父組件用來傳遞數據的一個自定義屬性。父組件的數據需要通過 props 把數據傳給子組件，子組件需要顯式地用 props 選項聲明 "prop"。

父組件通過props將數據傳遞給子組件

HTML

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app">  <child message="hello world!">props傳遞給子組件</child></div><script>// Vue.component('child', { // 聲明 props props: ['message'], // 同樣也可以在 vm 實例中像 “this.message” 這樣使用 template: '<h1>{{ message }}</h1>'})// 創建根實例new Vue({ el: '#app'})</script></body></html>

效果如圖：

動態 props組建數據傳遞

類似于用 v-bind 綁定 HTML 特性到一個表達式，也可以用 v-bind 動態綁定 props 的值到父組件的數據中。每當父組件的數據變化時，該變化也會傳導給子組件：

HTML

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app">  <div>   <input v-model="parentMsg">   <br>   <child v-bind:message="parentMsg"></child>  </div></div><script>// 注冊Vue.component('child', { // 聲明 props props: ['message'], // 同樣也可以在 vm 實例中像 “this.message” 這樣使用 template: '<span>{{ message }}</span>'})// 創建根實例new Vue({ el: '#app', data: {  parentMsg: '父組件內容' }})</script></body></html>

效果如圖：

v-bind 指令將 todo 傳到每一個重復的組件中

HTML

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app">  <ol>  <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>   </ol></div><script>Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>'})new Vue({ el: '#app', data: {  sites: [   { text: 'Runoob' },   { text: 'Google' },   { text: 'Taobao' }  ] }})</script></body></html>

效果如下：

注意: props 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。

組件為 props 指定驗證要求

props 是一個對象而不是字符串數組時，它包含驗證要求：

Vue.component('example', { props: {  // 基礎類型檢測 （`null` 意思是任何類型都可以）  propA: Number,  // 多種類型  propB: [String, Number],  // 必傳且是字符串  propC: {   type: String,   required: true  },  // 數字，有默認值  propD: {   type: Number,   default: 100  },  // 數組／對象的默認值應當由一個工廠函數返回  propE: {   type: Object,   default: function () {    return { message: 'hello' }   }  },  // 自定義驗證函數  propF: {   validator: function (value) {    return value > 10   }  } }})

type 可以是下面原生構造器：