元件不僅僅是要把模板的內容進行復用，更重要的是元件間的通訊。通常父元件的模板中包含子元件，父元件要正向的向子元件傳遞資料或者引數，子元件接收到後根據引數的不同來進行對應的渲染。這個正向的資料傳遞在vue元件中就是通過props來實現的。

在元件中，我們首先需要使用選項props申明需要從父元件接收的資料，字串陣列的props的傳遞如下：
示例：
子元件

<template>
  <div>
    <p>我是子元件，接收來自父元件的資訊：{{message}}</p>
  </div>
</template>

<script
 
>
  export default {
    name: "child",
    props: ['message']
  }
</script>

<style scoped></style>

父元件

<template>
  <div>
    <p>我是父元件，傳遞訊息給子元件,需要傳遞的訊息在下面輸入：</p>
    <p><input type="text" v-model="message"/></p>
    <child :message="message"
 
></child>
  </div>
</template>

<script>
  import child from './VComChild'

  export default {
    name: "parent",
    data(){
      return{
        message:''
      }
    },
    components : {
      'child': child
    }
  }
</script>

<style scoped></style>

其中：

props: ['message']

就是我們使用props的語法，執行效果：

其中如果我們要傳遞多個引數，可以在props的陣列中直接加入我們要接收的引數的名稱就好：

props: ['message','datas']

另外，在傳遞引數的時候，可以直接傳遞固定的資料，也可以傳遞動態資料。在傳遞動態資料的時候需要使用v-bind來動態繫結props的值，就像上面的一樣。而向字串的話則不需要v-bind

 <child :message="message" datas="haha"></child>

在實際的業務中我們經常會碰到下面的情況：
1.父元件傳遞初始值進來，子元件將它作為初始值儲存起來，然後在自己的作用域內使用。還是拿上面的例子來說：

<template>
  <div>
    <p>我是子元件，接收來自父元件的資訊：{{sub_message}}</p>
     <p>子元件輸入：<input v-model="sub_message"/></p>
  </div>
</template>

<script>
  export default {
    name: "child",
    props: ['message'],
    data(){
      return{
        sub_message:this.message
      }
    }
  }
</script>

<style scoped></style>

父元件中我們給message設定一個初始值：

 data(){
      return{
        message:'初始資訊'
      }
    }

此時，我們執行程式：

大家可以看到，修改父元件資料後沒有對子元件產生任何影響，反過來，我們修改子元件內的sub_message:this屬性，也不會影響父元件。

2.props作為需要被轉變的原始值傳入，這種情況下我們可以使用計算屬性來完成:

<template>
  <div>
    <p>我是子元件，接收來自父元件的資訊：{{sub_message}}</p>
  </div>
</template>

<script>
  export default {
    name: "child",
    props: ['message'],
    computed: {
      sub_message() {
        return this.message + "--來自父元件的訊息"
      }
    }
  }
</script>

<style scoped></style>

執行效果：

props資料驗證
在我們需要對自己的元件進行資料驗證時，此時使用props就需要使用物件寫法了。此時驗證的型別可以如下：

String
Number
Boolean
Object
Array
Function

下面我們就通過一個例子來看一下：

<template>
  <div>
   <template>
  <div>
    <p>props_number:{{props_number}}</p>
    <p>props_string_number:{{props_string_number}}</p>
    <p>props_boolean:{{props_boolean}}</p>
    <p>props_must:{{props_must}}</p>
    <p>props_obj_arr:{{props_obj_arr}}</p>
    <p>props_function:{{props_function}}</p>
  </div>
</template>

<script>
  export default {
    name: "child",
    props: {
      // 必須是數字型別
      props_number: Number,
      // 必須是數字或者字串
      props_string_number: [String, Number],
      // 必須是布林值，如果沒有定義，預設值就是true
      props_boolean: {
        type: Boolean,
        default: true
      },
      // 必須是數字，而且必須傳遞
      props_must: {
        type: Number,
        required: true
      },
      // 如果時數字或者物件，預設值必須時一個函式來返回
      props_obj_arr: {
        type: Array,
        default() {
          return [1, 2]
        }
      },
      // 自定義一個驗證函式
      props_function: {
        validate(value) {
          return value > 20
        }
      }

    }
  }
</script>

<style scoped></style>

  </div>
</template>

<script>
  export default {
    name: "child",
    props: {
      // 必須是數字型別
      props_number: Number,
      // 必須是數字或者字串
      props_string_number: [String, Number],
      // 必須是布林值，如果沒有定義，預設值就是true
      props_boolean: {
        type: Boolean,
        default: true
      },
      // 必須是數字，而且必須傳遞
      props_must: {
        type: Number,
        required: true
      },
      // 如果時數字或者物件，預設值必須時一個函式來返回
      props_obj_arr: {
        type: Array,
        default() {
          return [1, 2]
        }
      },
      // 自定義一個驗證函式
      props_function: {
        validator(value) {
          return value > 10
        }
      }

    }
  }
</script>

<style scoped></style>

這裡我們在子元件裡面定義了我們常見的幾種用法，然後在父元件中為這些資訊傳遞值：

  <child :props_number="10"
           :props_string_number="message"
           :props_boolean="false"
           :props_obj_arr="[1,2,3]"
           :prop_must="20"
           :props_function="20">
    </child>

執行程式：

讓我們修改幾個屬性的值，來看下我們設定的這些驗證是否是有作用，我們去掉必須要傳遞的prop_must，然後在控制檯檢視：

這裡我們說明一下，當props的驗證失敗的時候，開發版本下會在控制檯輸出一條警告，就像你們上面看到的一樣。而在正式版本中vue則會拒絕輸入值。