子組件能夠通過自身的props選項獲取父組件上的數據，但是在默認情況下，props是單向綁定的---當父組件數據（屬性）發生變化的時候會傳遞給子組件，引起子組件的變化，但不能反過來并且不允許子組件直接改變父組件的數據，會報錯的。例如：

也就是說當通過一種方法改變父組件數據的時候，子組件與之相關聯的props數據也會發生改變，從而影響子組件，但是子組件直接改變從父組件拿過來的props數據卻不能影響父組件的原始數據。也就是說一般情況下只能是“父影響子，而不是子影響父”。

兩種情況：

1.如果子組件想將從父組件獲得的數據作為局部數據來使用，可以將其給保存到子組件的局部變量data中（子組件中的變量），不影響父組件的數據；例如：

data:function(){                return {                  weather:{                    tempre:"22.3℃",                    weth:"rain",                    wind:this.ser                  }                }              },

這里的this.sers就是來源于子組件的props數據。

2.如果子組件想修改數據并且同步更新到父組件，兩種解決方式

第一種：使用.sync加上顯式觸發的一個事件this.$emit("update:你要更改的props數據", 改變后的值)，也就是在一個事件觸發的函數中通過this.$emit("update:你要更改的props數據", 改變后的值)來改變數據；例如：

HTML部分

 <div id= "container" v-cloak>    <my-compon></my-compon>  </div>  <!-- 父組件模板 -->  <template id="myComp">    <div>      <h3>大家好，我是{{animal.name}}貓，我已經和Jerry斗爭了{{animal.age}}年了</h3> 給綁定的數據使用.sync修飾符      <my-comp-son v-bind:animalage.sync="animal.age"></my-comp-son>    </div>  </template>  <!-- 子組件模板 -->  <template id="myCompSon">    <div>      <h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4>      <h3>今天的天氣：{{weather.weth}},風力{{weather.wind}},溫度{{weather.tempre}},{{animalname}},{{animalage}}</h3>      <button @click = "changeFatDaAge">點擊父組件中的數據會跟著改變方式一</button>     </div>   </template>

JS部分

var app = new Vue({      el:"#container",      data:{        house:{          date:"2017-10-10",          area:"144m²",          floor:6,        },        carBrand:"Benzi"      },      components:{        "my-compon":{//父組件          template:"#myComp",          data:function(){            return {              animal:{                name:"Tom",                age:3,                skin:"black"              },              shoe:"鴻星爾克",              dog:{                hair:"brown",                height:1.25              }            }          },          methods: {            changeData:function () {//這里的this指的是當前父組件的實例              this.animal.name = "Kitty"http://改變父組件中的數據            }          },          components:{            "my-comp-son":{//子組件              template:"#myCompSon",              props:["animalname","animalage","dog"],//地位和data一樣，獲取方式也是一樣              data:function(){                return {                  weather:{                    tempre:"22.3℃",                    weth:"rain",                    wind:"3級"                  }                }              },              methods:{                // 給v-bind使用修飾符.sync,需要顯式地觸發一個更新事件（this.$emit("update:你要更改的props數據", 改變后的值)）                changeFatDaAge:function(){                  // this.animalage = 19;                  this.$emit("update:animalage", 19)//通過這個方法來改變子組件props數據，并引起父組件相應數據的改變                }              }            }          }        }      }    })