在Vue中交惯，父子組件的關系可以總結為次泽，父組件通過prop向下傳遞穿仪，給子組件發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息意荤。
組件實例的作用域是孤立的啊片。這意味著不能 (也不應該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。父組件的數(shù)據(jù)需要通過?prop?才能下發(fā)到子組件中玖像。
eg：//父組件
newVue({
el:'#prop-example-2',?
data: {????????????
????????parentMsg:'Message from parent'?
????}
});
子組件中：<div>{{parentMsg}}<div/>
newVue({
el:'#prop-example-2',
? data: { },
????props:['我是子組件']
});
單向數(shù)據(jù)流：Prop 是單向綁定的：當父組件的屬性變化時紫谷，將傳導給子組件，但是反過來不會捐寥。這是為了防止子組件無意間修改了父組件的狀態(tài)笤昨，來避免應用的數(shù)據(jù)流變得難以理解。另外握恳，每次父組件更新時瞒窒，子組件的所有 prop 都會更新為最新值。這意味著你不應該在子組件內(nèi)部改變 prop乡洼。如果你這么做了崇裁，Vue 會在控制臺給出警告。
在兩種情況下束昵，我們很容易忍不住想去修改 prop 中數(shù)據(jù)：
Prop 作為初始值傳入后寇壳，子組件想把它當作局部數(shù)據(jù)來用；
Prop 作為原始數(shù)據(jù)傳入妻怎，由子組件處理成其它數(shù)據(jù)輸出壳炎。
對這兩種情況，正確的應對方式是：
定義一個局部變量逼侦，并用 prop 的值初始化它：
props: ['initialCounter'],
data:function(){
????????return{counter:this.initialCounter }
}
定義一個計算屬性匿辩，處理 prop 的值并返回：
props: ['size'],
computed: {
????????normalizedSize:function(){
????????????returnthis.size.trim().toLowerCase()
????? }
}；
注意在 JavaScript 中對象和數(shù)組是引用類型榛丢，指向同一個內(nèi)存空間铲球，如果 prop 是一個對象或數(shù)組，在子組件內(nèi)部改變它會影響父組件的狀態(tài)晰赞。
