一.傳遞資料

1.props 傳入單資料

就像 data 一樣，prop 可以用在模板內,同樣也可以在 vm 例項中像“this.message”這樣使用

<template>
  <div id="app">
      <h1>{{title}}</h1>
      <child message="hello!  Prop"></child>
  </div>
</template>
<script> 
import Vue from 'vue';
Vue.component('child', {
  // 宣告 props
  props: ['message'],
  template: '<span>{{ message }}</span>'
})
export default {
  name: 'app',
  data: function () {
    return { 
      title: '使用 Prop 傳遞資料'
    } 
  }
}
</script>
 

<child message="hello!  Prop"></child>

2.props 傳入多個數據

如果在父元件的模板類新增其他元素或者字元會有：

①在最前面加入—每個子元件渲染出來都會在其前面加上

②在最後面加入—每個子元件渲染出來都會在其後面加上

③在中間加入—他前面子元件後面加上，後面的子元件後面加上

（1）1種

<template>
  <div id="app">
    <child msg="hello!"></child>
    <child nihao="hello1!"></child>
    <child nisha="hello2!"></child> 
  </div>
</template>
<script> 
import Vue from 'vue';
Vue.component('child', {
    props: ['msg','nihao','nisha'],
    template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
});
export default {
  name: 'app',
  data: function () {
    return { 
    } 
  }
}
</script>
 

（2）2種

  template: '<span>小明，{{ msg }}{{nihao}}{{nisha}}</span>',

（3）3種

template: '<span>{{ msg }}{{nihao}}{{nisha}}小明</span>',

（4）4種

 template: '<p>{{ msg }}小明      {{nihao}}      {{nisha}}小林</p>',

注意：camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名：

二.動態prop

要動態地繫結父元件的資料到子模板的 props，與繫結到任何普通的HTML特性相類似，就是用 v-bind。每當父元件的資料變化時，該變化也會傳導給子元件

<template>
  <div id="app">
      <input v-model="parentMsg">
      <br>
      <child v-bind:my-message="parentMsg"></child>
  </div>
</template>
<script> 
import Vue from 'vue';
export default {
  name: 'app',
  data: function () {
    return { 
      title: '使用 Prop 傳遞資料',
      parentMsg: 'Message from parent'
    }
    
  },
  components: {
    child: {
      props: ['myMessage'],
      template: '<span>{{myMessage}}</span>'
    }
  }
}
</script>

三.表示式計算，傳遞值

如果想傳遞一個實際的 number，需要使用 v-bind，從而讓它的值被當作 JavaScript 表示式計算

<comp v-bind:some-prop="1"></comp>

<template>
  <div id="app">
    <p>{{tle1}}:<comp total="123+456"></comp></p>
    <p>{{tle2}}<comp :total="123+456"></comp></p>
    
  </div>
</template>
<script> 
import Vue from 'vue';
Vue.component("comp", {
    props: ["total"],
    template: "<span>total: {{total}}</span>",
});
export default {
  name: 'app',
  data: function () {
    return { 
      tle1: '這裡傳遞是字串',
      tle2: '用了v-bind動態語法，傳遞值會通過js的表示式計算，得到個值：'
    } 
  }
}
</script>

四.Prop型別繫結

prop 預設是單向繫結：當父元件的屬性變化時，將傳導給子元件，但是反過來不會。這是為了防止子元件無意修改了父元件的狀態——這會讓應用的資料流難以理解。

五.prop驗證

傳入的資料不符合規格，Vue 會發出警告。當元件給其他人使用時，這很有用。

<template>
  <div id="app">
    <div>name:{{dr.name}}, age:{{dr.age}}.<input v-model="telphone" /> </div>
    <br /><br />
    <div>
    <span>vue自定義元件</span><br />
    <child :msg_null="123+456" msg_string="adss" 
    :msg_number="0" :msg_twoway.sync="telphone" 
    :msg_validate="mobilephone" 
    :msg_number2String="mobilephone" 
    :msg_obj2json="dr" 
    :msg_json2obj="drJson"></child>
    </div>
  </div>
</template>
<script> 
import Vue from 'vue';
  Vue.component("child", {
    props: {
        msg_null: null,//基礎型別檢測("null"意思是任何型別都可以)   
        msg_string: { //String型別，必須是定義過的，可以是空字串""
            type: String,
            required: true,
        }, 
        msg_number: {//Number型別，預設值100
            type: Number,
            default: 100,
        },
        msg_obj: {//Object型別，返回值必須是js物件
            type: Object,
            default: function() {
                return {
                    name: "DarkRanger",
                    age: "18",
                }
            }
        },    
        msg_twoway: { //指定這個prop為雙向繫結,如果繫結型別不對將丟擲一條警告
            type: String,
            twoWay: true,
        },
        msg_validate: { //自定義驗證，必須是Number型別，驗證規則：大於0
            type: Number,
            validator: function(val) {
                return val > 0;
            }
        },
        msg_number2string: { //將值轉為String型別,在設定值之前轉換值(1.0.12+)
            coerce: function(val) {
                return val + ""
            }
        },
        msg_obj2json: { //js物件轉JSON字串
            coerce: function(obj) {
                return JSON.stringify(obj);
            }
        },
        msg_json2obj: {//JSON轉js物件
            coerce: function(val) {
                return JSON.parse(val);
            }
        },
    },
    template: '<div><b>msg_null=123+456=</b> {{msg_null}}</br>
    </br><b>msg_string="1":</b>{{msg_string}}</br></br><b>msg_number:</b> {{msg_number}}</br>
    </br><b>msg_obj:</b>{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</br>
    </br><b>msg_twoway:</b><input v-model="msg_twoway"></br></br><b>msg_validate:</b>{{msg_validate}}</br>
    </br><b>msg_number2String:</b> {{msg_number2string}}</br></br><b>msg_obj2json:</b> {{msg_obj2json}}</br>
    </br><b>msg_json2obj:</b>{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>'
});
export default {
  name: 'app',
  data: function () {
    return { 
      telphone: "0356-1234567",
      mobilephone: 15912345678,
      dr: {
          name: "DarkRanger",
          age: 25
      },
      drJson: {"name":"DarkRanger","age":25} 
    } 
  }
}
</script>

解釋：

①、msg_null：不論什麼資料型別，只要能解析成功，就渲染成正確的html

②、msg_string：只能傳遞String型別的字串，如果將child06中的“msg_string="this is string"”更改為“:msg_string="1+2"”,

控制檯報錯：

③、msg_number：如果在child06標籤中沒有定義值，我們將會取預設值100，現在定義了“:msg_number="99"”，如果將“:msg_number="99"”更改為“msg_number="99"”，控制檯報錯：

④、msg_obj：在js中我們定義的msg_obj的default屬性是一個具有返回js物件的函式，這裡取值的時候直接取的就是返回值，如果在child06中定義或者綁定了新的js物件，則會將msg_obj更新為新的資料。取js物件屬性值的時候用{{Object.prop}}取值即可。

⑤、msg_twoway：雙向資料繫結，在測試的過程中發現，即使設定“twoWay: true”，當子元件發生變化時，vue例項的資料並不會更新，還是單向的資料繫結，這裡我將child06中原先的“:msg_twoway="telphone"”更改為“:msg_twoway.sync="telphone"”，保證測試能夠資料雙向繫結。

⑥、msg_validate：有驗證規則的元件資料，這裡定義的規則是當前數值必須大於0，如果將child06中的“:msg_validate="mobilephone"”更改為“:msg_validate="-1"”。控制檯報錯：

⑦、msg_number2string：在結果賦值之前將數值轉化為字串。

⑧、msg_obj2json：vue.js內建了JSON的兩個方法，一個是JSON.parse(jsonStr)--》將JSON字串轉化為js物件，另外一個是JSON.stringify(obj)--》將js物件序列化為JSON字串。

這裡是將obj轉化為json字串，需要新增coerce屬性，它是一個具有返回json字串的函式，當然不是必須得用JSON.stringify(obj)方法，只要方法合理，能夠轉化為json能夠識別的字串即可。

⑨、msg_json2obj: 將json字串轉化為js物件。